Jquery 为什么在尝试获取缓冲时间时audio.buffered.end（0）会收到错误消息

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

这是我的全部代码：

HTML5：

<audio id="music" controls>
  <source src="https://archive.org/download/musicTestAudio27/Very%20nice%20%2827%29.mp3" type="audio/mpeg">
</audio>
    <br/>
    <div id="buffered"></div>

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

谷歌chrome说：

未捕获的IndexSizeError:未能在“时间范围”上执行“结束”：错误 提供的索引（0）大于或等于最大界限（0）

---

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

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

---

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

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

---

此错误发生在音频元素尚未加载时，因此代码找不到时间范围，因此返回错误

非常感谢。这很有帮助。我已经找了四天了。但现在它的工作就像一个符咒^ ^我添加了以下内容：`if（track.onprogress）{var w2=100*（track.buffered.end（0））/track.duration；$（'#buffered'）.css（“width”，w2+“%”；）`虽然此代码可能对您有用，但没有解释它的作用，也没有解释它回答问题的原因，或者它的作用与其他答案不同。一个好的答案应该包括对这些主题的解释。@Adrianhh-同意。这段代码片段正是我所需要的，但它只是其他答案的上下文给了我意义。我想投票，但不能，因为答案没有提供解释。这个答案与已经给出的答案（3年前…）有什么不同？

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

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+"%");
    }
}