小程序 音頻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分鐘的錄音，用戶試聽的時候缺乏拖放功能，不方便。待完善。。。 看下熱度。開源自定義播放器。