微信小程序獲取音頻時(shí)長(zhǎng)與實(shí)時(shí)獲取播放進(jìn)度問(wèn)題
首先在沒(méi)有播放音頻之前,居然拿不到總時(shí)長(zhǎng)
但是在播放之后也需要設(shè)置setTimeout來(lái)獲取
所以在監(jiān)聽(tīng)音頻播放進(jìn)度更新事件中獲取。順便獲取當(dāng)前播放進(jìn)度
按照官方的寫(xiě)法
audioPlayed: function () {
myAudio.play()
setTieout(() => {
myAudio.onTimeUpdate(() => {
console.log(myAudio.duration) //總時(shí)長(zhǎng)
console.log(myAudio.currentTime) //當(dāng)前播放進(jìn)度
})
}, 500)
}
但是這兩個(gè)console都沒(méi)有觸發(fā),很是神奇
增加延遲的時(shí)間也沒(méi)有用
打斷點(diǎn)都沒(méi)有進(jìn)去
但是!
audioPlayed: function () {
myAudio.play()
setTieout(() => {
myAudio.currentTime
myAudio.onTimeUpdate(() => {
console.log(myAudio.duration) //總時(shí)長(zhǎng)
console.log(myAudio.currentTime) //當(dāng)前播放進(jìn)度
})
}, 500)
}
在里面寫(xiě)了一個(gè)
myAudio.currentTime 或者 myAudio.duration
斷點(diǎn)就進(jìn)去了,console也出來(lái)了
由于過(guò)于神奇,所以記錄一下
下面看下微信小程序音頻長(zhǎng)度獲取的問(wèn)題
小程序推薦使用wx.createInnerAudioContext()創(chuàng)建的innerAudioContext,我們也通過(guò)這個(gè)接口創(chuàng)建音頻。
音頻的長(zhǎng)度可以通過(guò)屬性獲?。?/p>

但是,給innerAudioContext賦值src后就能獲取嗎,請(qǐng)看下面的例子:
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沒(méi)法獲取有點(diǎn)難以理解。
還好,我們通過(guò)setTimeout可以獲取到。
獲取到之后,還有個(gè)問(wèn)題,在開(kāi)發(fā)工具里,音頻播放完之后,duration不變。
偶爾出現(xiàn)的問(wèn)題:但在真機(jī)上,duration變?yōu)?了,也就是第二遍播放的時(shí)候,獲取不到duration了。這個(gè)可以聲明個(gè)個(gè)變量解決。
總結(jié)
以上所述是小編給大家介紹的微信小程序獲取音頻時(shí)長(zhǎng)與實(shí)時(shí)獲取播放進(jìn)度問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 微信小程序?qū)崿F(xiàn)播放音頻
- 微信小程序?qū)崿F(xiàn)錄音與音頻播放功能
- 微信小程序?qū)崿F(xiàn)音頻文件播放進(jìn)度的實(shí)例代碼
- 微信小程序多音頻播放進(jìn)度條問(wèn)題
- IOS中微信小程序播放緩存的音頻文件的方法
- 微信小程序page的生命周期和音頻播放及監(jiān)聽(tīng)實(shí)例詳解
- 微信小程序開(kāi)發(fā)之錄音機(jī) 音頻播放 動(dòng)畫(huà)實(shí)例 (真機(jī)可用)
- 微信小程序-圖片、錄音、音頻播放、音樂(lè)播放、視頻、文件代碼實(shí)例
- 微信小程序 audio音頻播放詳解及實(shí)例
- 微信小程序?qū)崿F(xiàn)播放音頻功能
相關(guān)文章
js中點(diǎn)擊空白區(qū)域時(shí)文本框與隱藏層的顯示與影藏問(wèn)題
文本框獲得焦點(diǎn)的時(shí)在文本框的下方顯示一個(gè)浮動(dòng)層,點(diǎn)擊文本框隱藏浮動(dòng)層,下面為大家介紹下鼠標(biāo)點(diǎn)擊時(shí)文本框與隱藏層處理問(wèn)題,感興趣的朋友可以參考下2013-08-08
優(yōu)化網(wǎng)頁(yè)之快速的呈現(xiàn)我們的網(wǎng)頁(yè)
優(yōu)化網(wǎng)頁(yè)之快速的呈現(xiàn)我們的網(wǎng)頁(yè)...2007-06-06
JS如何判斷瀏覽器類型和詳細(xì)區(qū)分IE各版本瀏覽器
本篇文章主要介紹了JS判斷瀏覽器類型和詳細(xì)區(qū)分IE各版本瀏覽器的代碼,非常具有實(shí)用價(jià)值,有興趣的可以了解一下。2017-03-03
javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)
這篇文章主要介紹了javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng),文字可以實(shí)現(xiàn)上下滾動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
兼容ie ff div 層 打開(kāi)+關(guān)閉+ 拖動(dòng)+遮罩+移動(dòng)+動(dòng)畫(huà)改變高寬
div層 打開(kāi)+關(guān)閉+ 拖動(dòng)+遮罩+移動(dòng)+動(dòng)畫(huà)改變高寬的實(shí)例js代碼2008-07-07

