音频缓冲产生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>）

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

Uncaught IndexSizeError: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (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; 
};