微信小程序獲取音頻時(shí)長與實(shí)時(shí)獲取播放進(jìn)度問題

更新時(shí)間：2018年08月28日 11:03:58 作者：夢幻般的菜鳥

這篇文章主要介紹了微信小程序獲取音頻時(shí)長與實(shí)時(shí)獲取播放進(jìn)度,文中給大家通過一個(gè)例子介紹了微信小程序音頻長度獲取的問題，感興趣的朋友跟隨腳本之家小編一起看看吧

首先在沒有播放音頻之前，居然拿不到總時(shí)長

但是在播放之后也需要設(shè)置setTimeout來獲取

所以在監(jiān)聽音頻播放進(jìn)度更新事件中獲取。順便獲取當(dāng)前播放進(jìn)度

按照官方的寫法

audioPlayed: function () {
  myAudio.play()
  setTieout(() => {
    myAudio.onTimeUpdate(() => {
      console.log(myAudio.duration)  //總時(shí)長
      console.log(myAudio.currentTime)  //當(dāng)前播放進(jìn)度
    })
  }, 500)
}

但是這兩個(gè)console都沒有觸發(fā)，很是神奇

增加延遲的時(shí)間也沒有用

打斷點(diǎn)都沒有進(jìn)去

但是！

audioPlayed: function () {
  myAudio.play()
  setTieout(() => {
    myAudio.currentTime
    myAudio.onTimeUpdate(() => {
      console.log(myAudio.duration)  //總時(shí)長
      console.log(myAudio.currentTime)  //當(dāng)前播放進(jìn)度
    })
  }, 500)
}

在里面寫了一個(gè)

myAudio.currentTime 或者 myAudio.duration

斷點(diǎn)就進(jìn)去了，console也出來了

由于過于神奇，所以記錄一下

下面看下微信小程序音頻長度獲取的問題

小程序推薦使用wx.createInnerAudioContext()創(chuàng)建的innerAudioContext，我們也通過這個(gè)接口創(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沒法獲取有點(diǎn)難以理解。

還好，我們通過setTimeout可以獲取到。

獲取到之后，還有個(gè)問題，在開發(fā)工具里，音頻播放完之后，duration不變。

偶爾出現(xiàn)的問題：但在真機(jī)上，duration變?yōu)?了，也就是第二遍播放的時(shí)候，獲取不到duration了。這個(gè)可以聲明個(gè)個(gè)變量解決。

總結(jié)

以上所述是小編給大家介紹的微信小程序獲取音頻時(shí)長與實(shí)時(shí)獲取播放進(jìn)度問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題詳解
這篇文章主要給大家介紹了關(guān)于JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-09-09
關(guān)于恒等于（===）和非恒等于（!==）
關(guān)于恒等于（===）和非恒等于（!==）...
2007-08-08
ES6 Promise對象概念及用法實(shí)例詳解
這篇文章主要介紹了ES6 Promise對象概念及用法,結(jié)合實(shí)例形式詳細(xì)分析了ES6中Promise對象的概念、原理、創(chuàng)建、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-10-10
實(shí)例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
關(guān)于javascript的運(yùn)行機(jī)制大家都應(yīng)該有所了解了吧，其實(shí)javascript是一個(gè)單線程的機(jī)制，但是因?yàn)殛?duì)列的關(guān)系它的表現(xiàn)會讓我們感覺是一個(gè)多線程的錯(cuò)覺。下面這篇文章通過實(shí)例主要給大家介紹了關(guān)于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
如何解決日期函數(shù)new Date()瀏覽器兼容性問題
這篇文章主要介紹了如何解決日期函數(shù)new Date()瀏覽器兼容性問題,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JS寫滑稽笑臉運(yùn)動(dòng)效果
這篇文章主要介紹了JS寫滑稽笑臉運(yùn)動(dòng)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-05-05
JavaScript節(jié)點(diǎn)及列表操作實(shí)例小結(jié)
這篇文章主要介紹了JavaScript節(jié)點(diǎn)及列表操作的方法,以實(shí)例的形式較為詳細(xì)的總結(jié)了javascript針對節(jié)點(diǎn)操作的相關(guān)技巧,并給出了一個(gè)完整的節(jié)點(diǎn)操作方法實(shí)例總結(jié),需要的朋友可以參考下
2015-08-08
自定義javascript驗(yàn)證框架示例【附源碼下載】
這篇文章主要介紹了自定義javascript驗(yàn)證框架,結(jié)合實(shí)例形式分析了javascript正則驗(yàn)證相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2019-05-05
深入了解JavaScript中的垃圾回收機(jī)制
JavaScript中的垃圾回收機(jī)制負(fù)責(zé)自動(dòng)管理內(nèi)存，回收不再使用的對象所占用的內(nèi)存空間。本文主要介紹了JS中垃圾回收機(jī)制的相關(guān)知識，需要的可以參考一下
2023-04-04
詳解JavaScript中數(shù)組的reduce方法
js函數(shù)中有三個(gè)在特定場合很好用的函數(shù):reduce(),map(),filter()。而數(shù)組經(jīng)常用到的方法有push、join、indexOf、slice等等，但是有一個(gè)經(jīng)常被我們忽略的方法：reduce，這個(gè)方法簡直強(qiáng)大的不要不要的。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。
2016-12-12