小程序 音频API采坑彻底手册

最近打算作了个音频自定义播放器，录音跟音频播放的功能点踩各类莫名其妙的坑，社区也有很多人在提问，特写此文祭天
基于WEPY开发。

录音功能

相关api wx.getRecorderManager

WXML 模板

... 除了低版本样式兼容，没啥坑。

JS 交互逻辑

录音坑之一

部分手机没法上传录音文件。
缘由：服务端上传文件大小限制
解决：sampleRate,encodeBitRate二者有对应要求，具体看文档，尽可能调质中低音质,公司财大气粗忽略，顶配服务器跑起来。
音质越高文件文件越大，相同参数ios系统的录音文件更大。

const recorderManager = wepy.getRecorderManager()
const options = {
    duration: 600000, // 是的没看错 10分钟...
    sampleRate: 8000,
    encodeBitRate: 20000,
    ...
}
复制代码

录音坑之二

部分用户录音以后没法试听。
缘由：用户拒绝受权，录音代码无作校验(不严谨哈)；苹果手机用户开了静音功能(就是左上角那个开关，这真无力吐槽吖);内存不足，开启蓝牙； 解决：录音开始前先查看麦克风受权状况，无受权不录音。代码以下
设置播放实例obeyMuteSwitch属性（暂只支持ios）..
第三，我也不知道，通常建议重启。。。就是这么美妙。

...
methods = {
    // 开始录音
    recording() {
      wepy.getSetting().then((res) => {
        if (!res.authSetting['scope.record']) {
          wepy.authorize({scope: 'scope.record'}).then(() => {
            recorderManager.start(options)
            this.startTimer()
            this.$apply()
          }, (e) => {
            wepy.openSetting()
          })
        } else {
          recorderManager.start(options)
          this.startTimer()
          this.$apply()
        }
      })
    },
}
...
复制代码

录音坑之三

录音时长不许(该参数列表须要)
缘由：手机卡顿，延迟致使部分用户录音跟计时器不一样步(你永远不知道用户用的是啥手机，我只能说蓝绿厂大坑)
解决：调用onStop方法回调录音时长。按理来讲最长也就600s，可是后台看到有段录音时长是10000多s，目前还不知道啥缘由，求解。

onLoad () {
    recorderManager.onStop(({tempFilePath, duration})=>{
        //do something
        this.duration = parseInt(duration / 1000)
    }) 
 }
 // 计时器
  startTimer (){
      // do something
  }
复制代码

录音坑之四

录音不完整
缘由：录音过程当中自动锁屏功能，来电等外部缘由致使录音中断。
解决：提醒用户保持小程序运行状态；按住录音。不过咱们10分钟，我怕用户手抽筋;wx.setKeepScreenOn()接口。

音频播放功能

相关api wx.createInnerAudioContext

JS 交互逻辑

audio组件很差用吗？自定义好看多啦~
播放的坑相对较少一点，建议页面只注册一个播放器，动态修改音源，相关事件只在页面onLoad注册
*动态修改音源，没法获取当前音源duration,异步!？

const innerAudioContext = wepy.createInnerAudioContext()
...
onLoad ({classId, date}) {
    innerAudioContext.onEnded(() => {
      //do something
    })
    innerAudioContext.onPlay(() => {
       
    })
    innerAudioContext.onTimeUpdate(()=>{
        //update Progress bar
    })
    ...
}
// 计时器
startTimer (){
    // do something
}
复制代码

播放坑

听不到(好想除了听不到也没啥坑了吧)，canpaly状态须要主动触发
缘由：同上，ios用户开了静音模式本身；网络缘由，进度条同定时器更新，文件没有缓存至可播放状态，致使进度条播放不一样步；https,https,https..部分ios没法播放https协议的资源。 解决：进度条再onTimeUpdate方法中更新。采用http的资源。

后续

10分钟的录音，用户试听的时候缺乏拖放功能，不方便。待完善。。。 看下热度。开源自定义播放器。