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