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：无法执行＆＃39;结束＆＃39; on＆＃39; TimeRanges＆＃39;：提供的索引（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

您可以在loadeddata侦听器中获取缓冲的值：

      audio.addEventListener ('loadeddata', function () {
        
        if (typeof (this.buffered) !== 'undefined' && this.buffered.length > 0) {
          
          audio.addEventListener ('progress', function () {
            
            var z = (this.buffered.end (0) / this.duration) * 100;
            progress.innerText = z;
            
          });
          
        }
        
      });

请记住，它继承了this，而不是music！

Answer 2

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

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 3

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

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

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

3 个答案: