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)
    }

 

posted @ 2019-01-23 12:25  这个男人  阅读(4597)  评论(0编辑  收藏  举报