小程序 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 渲染

        

          
          语音录入，录制时间最长为3分钟
        
        
        

          
          
          {{i.timing?i.timing:'00:00'}}
          
            
          
          
        
      

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