记录一次通过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 + "%";
      }
    },

 

百度未收录
分享