当我尝试获得缓冲时间时，为什么audio.buffered.end（0）会收到错误消息

我正在使用HTML5和jQuery构建mp3播放列表播放器。 在这个播放器中，有一个水平条逐渐与mp3文件的缓冲存在一起增长。

这是我的完整代码： get buffered end

HTML5：

CSS：

 #buffered{ border:solid #ccc 1px; height:10px; background:red; display:block; width:1%; } 

使用Javascript：

 var track = document.getElementById("music"); setInterval(function(){ var w = 100*(track.buffered.end(0))/track.duration; $('#buffered').css("width",w+"%"); }, 1000); 

但Firefox给我一条错误消息说：

IndexSizeError：索引或大小为负数或大于允许的数量

var w = 100 *（track.buffered.end（0））/ track.duration;

和谷歌铬合金说：

未捕获的IndexSizeError：无法在’TimeRanges’上执行’end’：提供的索引（0）大于或等于最大边界（0）。

Answer 1

我相信在元素初始化之前访问buffered.end时会出现错误。 您可以重写该代码以避免它

 track = document.getElementById("music"); track.onprogress = function(){ var w = 100*(track.buffered.end(0))/track.duration; $('#buffered').css("width",w+"%"); } 

Answer 2

接受的答案并不能解决我的问题。 您还应该在访问buffered.end之前检查轨道是否已加载，如下所示：

 track.onprogress = function(){ if (track.readyState === 4){ var w = 100*(track.buffered.end(0))/track.duration; $('#buffered').css("width",w+"%"); } } 

Answer 3

 track = document.getElementById("music"); track.onprogress = function(){ if(track.buffered.length>0){ var w = 100*(track.buffered.end(0))/track.duration; $('#buffered').css("width",w+"%"); } }