h5 audio播放問題,audio獲取緩存進度條


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM