小程序 mpvue 多段音频播放及长按录音

我们都知道 小程序有自带的 api 也有html5 的audio 标签

但 小程序缺不内置了，咋办呢，肯定有办法解决的，如

const recorderManager = wx.getRecorderManager() // 录音管理器 暂存器

const innerAudioContext = wx.createInnerAudioContext()  // 音频播放 （一段视频一个实例）

先来一段UI

看到这个还不如上代码合适，不唠叨了

//js模块

// js
data(){
    return {

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
      list: [{
        id: 1,
        timing: 0,
        percent: 0,
        src: this.src,
        duration: 2000
      }, {
        id: 2,
        timing: 0,
        percent: 0,
        src: this.src,
        duration: 3000
      }, {
        id: 3,
        timing: 0,
        percent: 0,
        src: this.src,
        duration: 4000
      }]
}
},
methods:{
    // 开始录音的时候
    start () {
      const options = {
        duration: 10000, // 指定录音的时长，单位 ms
        sampleRate: 16000, // 采样率
        numberOfChannels: 1, // 录音通道数
        encodeBitRate: 96000, // 编码码率
        format: 'mp3', // 音频格式，有效值 aac/mp3
        frameSize: 50 // 指定帧大小，单位 KB
      }
      // 开始录音
      recorderManager.start(options)
      recorderManager.onStart(() => {
        console.log('recorder start')
      })
    },
    // 停止录音
    stop () {
      recorderManager.stop()
      recorderManager.onStop((res) => {
        this.tempFilePath = res.tempFilePath
        this.duration = res.duration
        console.log('停止录音', res)
      })
    },
    // 播放声音
    play (i) {
      let $this = this
      const innerAudioContext = wx.createInnerAudioContext()
      innerAudioContext.autoplay = true
      innerAudioContext.src = this.src
      innerAudioContext.onPlay(() => {
        let times = 0
        let timer = setInterval(() => {
          times += 1000
          i.percent = parseInt(times / i.duration * 100)
          i.timing = $this.tempToTime(times)
          if (times > i.duration) {
            innerAudioContext.stop()
            i.timing = 0
            i.percent = 0
            clearInterval(timer)
          }
        }, 1000)
      })
    },
    del (i, idx) {
      this.list.splice(idx, 1)
    },
    tempToTime (s) {
      if (s < 60000) {
        return `00:${formatNumber(s / 1000)}`
      } else if (s < 120000) {
        return `01:${formatNumber((s - 6000) / 1000)}`
      } else if (s < 180000) {
        return `02:${formatNumber((s - 12000) / 1000)}`
      } else {
        return `03:00`
      }
    }
  }
}

// html 渲染

<div class="record">
        <div class="start">
          <img src="../../../static/images/radio.png" @click="start">
          <span>语音录入，录制时间最长为3分钟</span>
        </div>
        
        <div class="radioList" v-for="(i,index) in list" :key="i.id">
          <img
            src="../../../static/images/record_play.png"
            class="stop"
            @click="play(i)"
            v-if="!i.timing"
          >
          <img src="../../../static/images/record_stop.png" class="stop" v-else>
          <span class="time">{{i.timing?i.timing:'00:00'}}</span>
          <span class="gress">
            <progress
              :percent="i.percent"
              stroke-width="2"
              activeColor="#7CCFFE"
              border-radius="2rpx"
            />
          </span>
          <img src="../../../static/images/record_del.png" class="del" @click="del(i,index)">
        </div>
      </div>

css就不传了，定位啥的 flex 布局一波带走，