音频缓冲产生0 TimeRanges直到完全加载

Question

我有一个HTML5音频播放器，我正试图监视它的缓冲进度，直到它达到100％所以我可以运行它。

music = document.querySelector("#music");
progress = document.querySelector("#progress");

music.addEventListener("progress", function(){
    var z = (music.buffered.end(0) / music.duration)*100;
    progress.value = z;
}, false);

（其中#progress是HTML <progress>元素。）

当我尝试上面的代码时，我得到了这个错误。

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

This error has been discussed here，但我使用的代码类似于答案中使用的代码，我仍然得到错误。

这是奇怪的部分：我监视music.buffered.length，它只在音频满载时才到达1，所以由于某种原因我无法监听音频元素的缓冲长度。

Here's a rather robust JS Bin to show the problem.

有没有其他人遇到这个问题？我在这里做错了吗？

Answer 1

您可能想尝试替换此部分：

music.addEventListener("progress", function(){
    var z = (music.buffered.end(0) / music.duration)*100;
    progress.innerText = z;
}, false);

这部分：

if(music.onprogress){
    var z = (music.buffered.end(0) / music.duration)*100;
    progress.innerText = z;
};

Answer 2

几年后，我设法确定了问题。 @dandavis是对的。我的服务器没有提供有关音频文件的元数据，因此浏览器不知道音频文件的长度（甚至文件大小有多大），直到完全下载完毕。没有时间范围，因为根本没有关于时间的信息。

如果您遇到此问题，请确保您的服务器提供有关您的音频文件的所有内容。