记录一次通过html中的audio中获取缓存时报错解决

最近在弄一个在线音乐播放，使用的是audio标签，在获取缓存进度时出现了错误，

mindex.f314aae60bc862df5f44.js:41950 Uncaught DOMException: Failed to execute 'end' on 'TimeRanges': The index provided (4294967295) is greater than the maximum bound (0).

通过audio对象updateTime来监听当前播放时间及缓存进度，用于设置播放进度及缓存进度，之所以出现上面那错误，是因为在获取到他的缓存时是从0-1之间的，然后在出现过这错误之后就不会报错了，做法是在执行end方法时，先判断buffered的length是否为0；代码：

updateTime(e) {
      this.currentTime = e.target.currentTime;
      var timeRanges = e.target.buffered;
      // 获取以缓存的时间
      if (timeRanges.length != 0) {
        var timeBuffered = timeRanges.end(timeRanges.length - 1);
        // 获取缓存进度，值为0到1
        var bufferPercent = timeBuffered / e.target.duration;
        this.buffDom[0].style.width = bufferPercent * 100 + "%";
      }
    },

 

百度已收录