最近公司上線一個(gè)類似小打卡的一個(gè)小程序,基于WEPY開發(fā)。 其他都功能點(diǎn)都還好,錄音跟音頻播放的功能點(diǎn)踩各種莫名其妙的坑,社區(qū)也有不少人在提問,特寫此文祭天 產(chǎn)品大概的UI如下圖 錄音功能相關(guān)api wx.getRecorderManager ... 除了低版本樣式兼容,沒啥坑。 JS 交互邏輯錄音坑之一部分手機(jī)無法上傳錄音文件。 原因:服務(wù)端上傳文件大小限制 解決:sampleRate,encodeBitRate兩者有對(duì)應(yīng)要求,具體看文檔,盡量調(diào)質(zhì)中低音質(zhì),公司財(cái)大氣粗忽略,頂配服務(wù)器跑起來。 音質(zhì)越高文件文件越大,相同參數(shù)ios系統(tǒng)的錄音文件更大。 const recorderManager = wepy.getRecorderManager() const options = { duration: 600000, // 是的沒看錯(cuò) 10分鐘... sampleRate: 8000, encodeBitRate: 20000, ... } 錄音坑之二部分用戶錄音之后無法試聽。 原因:用戶拒絕授權(quán),錄音代碼無做校驗(yàn)(不嚴(yán)謹(jǐn)哈);蘋果手機(jī)用戶開了靜音功能(就是左上角那個(gè)開關(guān),這真無力吐槽吖);內(nèi)存不足,開啟藍(lán)牙; 解決:錄音開始前先查看麥克風(fēng)授權(quán)情況,無授權(quán)不錄音。代碼如下 設(shè)置播放實(shí)例 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() } }) }, } ... 錄音坑之三錄音時(shí)長(zhǎng)不準(zhǔn)(該參數(shù)列表需要) 原因:手機(jī)卡頓,延遲導(dǎo)致部分用戶錄音跟計(jì)時(shí)器不同步(你永遠(yuǎn)不知道用戶用的是啥手機(jī),我只能說藍(lán)綠廠大坑) 解決:調(diào)用 onStop 方法回調(diào)錄音時(shí)長(zhǎng)。按理來說最長(zhǎng)也就600s,但是后臺(tái)看到有段錄音時(shí)長(zhǎng)是10000多s,目前還不知道啥原因,求解。 onLoad () { recorderManager.onStop(({tempFilePath, duration})=>{ //do something this.duration = parseInt(duration / 1000) }) } // 計(jì)時(shí)器 startTimer (){ // do something } 錄音坑之四錄音不完整 原因:錄音過程中自動(dòng)鎖屏功能,來電等外部原因?qū)е落浺糁袛唷?/p> 解決:提醒用戶保持小程序運(yùn)行狀態(tài);按住錄音。不過我們10分鐘,我怕用戶手抽筋;wx.setKeepScreenOn()接口。 音頻播放功能相關(guān)api wx.createInnerAudioContext JS 交互邏輯audio組件不好用嗎?是我們的UI飄了,自定義好看多啦~ 播放的坑相對(duì)較少一點(diǎn),建議頁(yè)面只注冊(cè)一個(gè)播放器,動(dòng)態(tài)修改音源,相關(guān)事件只在頁(yè)面onLoad注冊(cè) *動(dòng)態(tài)修改音源,無法獲取當(dāng)前音源duration,異步!? const innerAudioContext = wepy.createInnerAudioContext() ... onLoad ({classId, date}) { innerAudioContext.onEnded(() => { //do something }) innerAudioContext.onPlay(() => { }) innerAudioContext.onTimeUpdate(()=>{ //update Progress bar }) ... } // 計(jì)時(shí)器 startTimer (){ // do something } 播放坑聽不到(好想除了聽不到也沒啥坑了吧),canpaly狀態(tài)需要主動(dòng)觸發(fā) 原因:同上,ios用戶開了靜音模式自己;網(wǎng)絡(luò)原因,進(jìn)度條同定時(shí)器更新,文件沒有緩存至可播放狀態(tài),導(dǎo)致進(jìn)度條播放不同步;https,https,https..部分ios無法播放https協(xié)議的資源。 解決:進(jìn)度條再 onTimeUpdate 方法中更新。采用http的資源。 不做客服的運(yùn)維不是好開發(fā)。手動(dòng)MMP~ |