詳解小程序BackgroundAudioManager踩坑之旅
由于貴公司業(yè)務(wù)發(fā)展需要,切圖仔開始寫起了小程序啦(興奮地搓小手手)
貴公司是知識(shí)付費(fèi)平臺(tái),需要音頻播放課程,同時(shí)希望用戶在退出小程序后依然可以聽課。在這種情況下,小程序的API——BackgroundAudioManager就派得上用場(chǎng)啦。
在看完官方文檔,信心滿滿地寫完提測(cè)后,測(cè)試小姐姐找出的bug比我的工資還多?。。?#128557;😭😭)因此有了本篇文章。
本篇涉及到的幾個(gè)坑(以下BAM為BackgroundAudioManager的縮寫)
- 一個(gè)誤區(qū)
- BAM.onStop() 與 BAM.onEnded() 的坑
- BAM.seek() 與 BAM.onSeeked() 的坑
- BAM.onTimeUpdate() 的坑
- 在音頻頁退出小程序暫停音頻后返回小程序的坑
一個(gè)誤區(qū)
- BAM.onCanplay()是監(jiān)聽背景音頻進(jìn)入可播放狀態(tài)事件,并不代表在該事件中,音頻就為播放狀態(tài)。
BAM.onStop() 與 BAM.onEnded() 的坑
在BAM.onStop() 與 BAM.onEnded()的回調(diào)事件中,audio.src為空
BAM.onStop(): 當(dāng)再次播放音頻時(shí),將data數(shù)據(jù)中音頻的src賦值給BAM,然后在onTimeUpdate()事件內(nèi)跳轉(zhuǎn)到上次暫停的時(shí)間點(diǎn)(記得本地緩存音頻播放時(shí)間哦~)
BAM.onEnded():在BAM.onEnded()回調(diào)函數(shù)中,將data數(shù)據(jù)中音頻的src賦值給BAM,然后在onTimeUpdate()事件內(nèi)暫停音頻
BAM.seek() 與 BAM.onSeeked() 的坑
- 設(shè)置src后立即seek()失效
seek操作最好放在BAM.onTimeUpdate事件中。 類似HTML的Audio元素的ontimeupdate方法,建議將currentTime的改變都在該方法中進(jìn)行。
- 暫停狀態(tài)下跳轉(zhuǎn)到指定位置,在onSeeked()回調(diào)中,Android的currentTime是跳轉(zhuǎn)前的時(shí)間,而IOS是跳轉(zhuǎn)后的時(shí)間
雖然在onSeeked()回調(diào)函數(shù)中,Android獲取currentTime為跳轉(zhuǎn)前的時(shí)間,但若開始播放,還是從指定位置開始播放。所以若有暫停連續(xù)跳轉(zhuǎn)并需要獲取currentTime的需求,可在onSeeked()回調(diào)函數(shù)中判斷若為Android并且為暫停狀態(tài)時(shí)播放。
- 開發(fā)者工具不走onSeeked()回調(diào)
如果在onSeeked()回調(diào)里面有特殊操作,記得區(qū)分是否是開發(fā)者工具~
BAM.onTimeUpdate() 的坑
在退出小程序后,Android與IOS均不走onTimeUpdate()事件
因此若在onTimeUpdate()事件內(nèi)實(shí)時(shí)緩存音頻的播放時(shí)長(zhǎng)會(huì)導(dǎo)致在退出小程序暫停后返回拿到的音頻緩存時(shí)間是退出前的時(shí)間??梢栽趏nPause()與onEnded()事件中記錄暫停時(shí)的音頻播放時(shí)長(zhǎng)。(在onTimeUpdate()事件內(nèi)所做的操作可根據(jù)實(shí)際情況考慮節(jié)流哦~)
在音頻頁退出小程序暫停音頻后返回小程序的坑
IOS:BAM.src為空
Android:BAM.src不為空,但play()失敗
這點(diǎn)與第二點(diǎn)的處理方式相同。當(dāng)在音頻頁退出小程序暫停音頻后返回,進(jìn)入onShow()事件時(shí),將data數(shù)據(jù)中音頻的src賦值給BAM,然后在onTimeUpdate()事件內(nèi)跳轉(zhuǎn)到上次暫停的時(shí)間點(diǎn)
原本以為可以寫的會(huì)有很多,最后寫下來也就幾個(gè)點(diǎn),表達(dá)的不也是很清晰,就當(dāng)學(xué)習(xí)日記吧
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript事件學(xué)習(xí)小結(jié)(三)js事件對(duì)象
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(三)js事件對(duì)象的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06LBS blog sql注射漏洞[All version]-官方已有補(bǔ)丁
LBS blog sql注射漏洞[All version]-官方已有補(bǔ)丁...2007-08-08js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)簡(jiǎn)單實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01JavaScript制作簡(jiǎn)易計(jì)算器(不用eval)
這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡(jiǎn)易計(jì)算器的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02