<!--全局 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)
}