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

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

这是我的完整代码：获取缓冲结束 http://jsfiddle.net/zuhairtaha/d9oj3dan/

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>

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

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

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