小程序录音及其动画

基础功能可以这样写，挺简单的～

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'}}