音頻緩衝產生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; 
};