<!--全局 audio -->
<audio
id="audio"
@playing="audioReady"
@timeupdate="audioUpdateTime"
@pause="audioPaused"
@ended="audioEnd"
@error="audioError"/>
// 監聽微信端頁面加載 觸發音頻load
document.addEventListener('DOMContentLoaded', () => {
const audio = document.getElementById('audio')
audio.load()
document.addEventListener('WeixinJSBridgeReady', () => {
audio.load()
}, false)
})
audioUpdateTime(e) { // 更新時間和進度條 (默認一秒會執行多次 需要處理一秒只執行一次更新) let time = 0 if (parseInt(e.target.currentTime) !== Number(time)) { time = parseInt(e.target.currentTime) const audio = document.getElementById('audio') const timeRanges = audio.buffered // 獲取已緩存的時間 timeRanges.end(timeRanges.length - 1)
// 計算百分比 展示進度
parseInt(timeRanges.end(timeRanges.length - 1) * 100 / audio.duration * 100) / 100)
}
