功能比较独立&&简单,大概是这样的交互
先说录音吧,看 文档
基础功能可以这样写,挺简单的~
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
Page({
data: {
intervalId:0,
recording:false,
recordtime:0,
filePath:"",
proc:0
},
onLoad: function (options) {
recorderManager.onStart(() => {
this.setData({ recording: true })
})
recorderManager.onStop((res) => {
this.cancelRecord()
this.setData({
recording: false ,
filePath: res.tempFilePath,
})
})
recorderManager.onFrameRecorded((res) => {
const { frameBuffer } = res
console.log('frameBuffer.byteLength', frameBuffer.byteLength)
})
this.fetch();
},
startRecord: function () {
recorderManager.start(this.data.options)
this.setData({
recordtime: 0 ,
filePath: ""
})
this.data.intervalId = setInterval(()=>{
var recordtime = this.data.recordtime + 50
this.setData({
recordtime: recordtime ,
proc: recordtime / this.data.options.duration
})
}, 50);
console.log(this.data.intervalId)
},
cancelRecord: function () {
recorderManager.stop()
if (this.data.intervalId > 0){
clearInterval(this.data.intervalId)
this.data.intervalId = 0
}
},
playVoice:function(){
innerAudioContext.src = this.data.url.length > 0 ? this.data.url : this.data.filePath
innerAudioContext.play()
}
})
比较难画的是圆形进度条,这里也分享下思路:
- 先画一个半圆环A(eg:黄色)
- 再画一个半圆环B(eg:背景色)
- 按进度旋转第二个半圆环B
- 进度过一半的时候,反转第二个半圆环B的颜色(eg:背景色->黄色)
细节是这样的:
把圆环一半设置为透明
background-image: linear-gradient(to left, transparent 50%, #F4F4F4 0);
旋转 && 50%变色
transform:rotate({{proc<0.5?proc:(proc+0.5)}}turn);
background-color: {{proc<0.5?'#F4F4F4;':'#FCDF6A'}}
玩~