小程式 音訊API採坑完全手冊

MarsDes發表於2018-05-11
音訊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分鐘的錄音，使用者試聽的時候缺少拖放功能，不方便。待完善。。。
看下熱度。開源自定義播放器。

相關文章