小程序 音頻API采坑完全手冊
|
最近公司上線一個類似小打卡的一個小程序,基于WEPY開發。 其他都功能點都還好，錄音跟音頻播放的功能點踩各種莫名其妙的坑，社區也有不少人在提問，特寫此文祭天 產品大概的UI如下圖
錄音功能相關api wx.getRecorderManager ... 除了低版本樣式兼容，沒啥坑。 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組件不好用嗎？是我們的UI飄了，自定義好看多啦~ 播放的坑相對較少一點，建議頁面只注冊一個播放器，動態修改音源，相關事件只在頁面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的資源。 不做客服的運維不是好開發。手動MMP~ |
