微信小程序獲取音頻時長與實時獲取播放進度問題
首先在沒有播放音頻之前，居然拿不到總時長
但是在播放之后也需要設置setTimeout來獲取
所以在監(jiān)聽音頻播放進度更新事件中獲取。順便獲取當前播放進度
按照官方的寫法
audioPlayed: function () {
myAudio.play()
setTieout(() => {
myAudio.onTimeUpdate(() => {
console.log(myAudio.duration) //總時長
console.log(myAudio.currentTime) //當前播放進度
})
}, 500)
}
但是這兩個console都沒有觸發(fā)，很是神奇
增加延遲的時間也沒有用
打斷點都沒有進去
但是！
audioPlayed: function () {
myAudio.play()
setTieout(() => {
myAudio.currentTime
myAudio.onTimeUpdate(() => {
console.log(myAudio.duration) //總時長
console.log(myAudio.currentTime) //當前播放進度
})
}, 500)
}
在里面寫了一個
myAudio.currentTime 或者 myAudio.duration
斷點就進去了，console也出來了
由于過于神奇，所以記錄一下
下面看下微信小程序音頻長度獲取的問題
小程序推薦使用wx.createInnerAudioContext()創(chuàng)建的innerAudioContext，我們也通過這個接口創(chuàng)建音頻。
音頻的長度可以通過屬性獲?。?/p>
但是，給innerAudioContext賦值src后就能獲取嗎，請看下面的例子：
onLoad: function () {
bgM = wx.createInnerAudioContext();
bgM.src = 'https://upyun.lesson.bbwansha.com/dub/user/2.mp3';
console.log(bgM.duration);//0
bgM.onCanplay(()=>{
console.log(bgM.duration)//0
})
bgM.play();
bgM.onPlay(()=>{
console.log(bgM.duration)//0
})
setTimeout(()=>{
console.log(bgM.duration)//2.795102
},1000)
},
賦值結(jié)束后不能獲取能夠理解，在onCanplay，onPlay沒法獲取有點難以理解。
還好，我們通過setTimeout可以獲取到。
獲取到之后，還有個問題，在開發(fā)工具里，音頻播放完之后，duration不變。
偶爾出現(xiàn)的問題：但在真機上，duration變?yōu)?了，也就是第二遍播放的時候，獲取不到duration了。這個可以聲明個個變量解決。
總結(jié)
以上所述是小編給大家介紹的微信小程序獲取音頻時長與實時獲取播放進度問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
JavaScript進階教程之函數(shù)的定義、調(diào)用及this指向問題詳解
這篇文章主要給大家介紹了關于JavaScript進階教程之函數(shù)的定義、調(diào)用及this指向問題的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
關于恒等于（===）和非恒等于（!==）...2007-08-08
這篇文章主要介紹了ES6 Promise對象概念及用法,結(jié)合實例形式詳細分析了ES6中Promise對象的概念、原理、創(chuàng)建、使用方法及相關操作注意事項,需要的朋友可以參考下2019-10-10
實例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
關于javascript的運行機制大家都應該有所了解了吧，其實javascript是一個單線程的機制，但是因為隊列的關系它的表現(xiàn)會讓我們感覺是一個多線程的錯覺。下面這篇文章通過實例主要給大家介紹了關于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關資料，需要的朋友可以參考下。2017-07-07
如何解決日期函數(shù)new Date()瀏覽器兼容性問題
這篇文章主要介紹了如何解決日期函數(shù)new Date()瀏覽器兼容性問題,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JS寫滑稽笑臉運動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
JavaScript節(jié)點及列表操作實例小結(jié)
這篇文章主要介紹了JavaScript節(jié)點及列表操作的方法,以實例的形式較為詳細的總結(jié)了javascript針對節(jié)點操作的相關技巧,并給出了一個完整的節(jié)點操作方法實例總結(jié),需要的朋友可以參考下2015-08-08
這篇文章主要介紹了自定義javascript驗證框架,結(jié)合實例形式分析了javascript正則驗證相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-05-05
JavaScript中的垃圾回收機制負責自動管理內(nèi)存，回收不再使用的對象所占用的內(nèi)存空間。本文主要介紹了JS中垃圾回收機制的相關知識，需要的可以參考一下2023-04-04
js函數(shù)中有三個在特定場合很好用的函數(shù):reduce(),map(),filter()。而數(shù)組經(jīng)常用到的方法有push、join、indexOf、slice等等，但是有一個經(jīng)常被我們忽略的方法：reduce，這個方法簡直強大的不要不要的。下面通過這篇文章來一起學習學習吧。2016-12-12