在音頻播放器中添加緩衝條

Question

我正在使用HTML5製作音頻播放器。

我想知道我怎麼可以添加一個緩衝條，這樣用戶可以看到歌曲多久加載。

我已經使用了幾個屬性，我在一些教程看到試過了，但都沒有工作，我無法找到這個特定主題的任何東西。

這是我想要編輯的audio player。

我希望有人能指導我如何編輯代碼來做到這一點，或者，否則，建議教程，文檔或任何信息。

Answer 1

有沒有保證，所有這一切都是要在所有的瀏覽器...

...然而，假設，這篇文章的其餘部分是：

var audio = new Audio(); 
audio.src = "//example.com/some-really-long-song.mp3"; 

"canplay"是第一個有用的事件，就能夠播放歌曲而言。
這意味着歌曲的一部分已準備就緒，如果您按下播放按鈕，則至少能夠聽到某些內容。

或者"canplaythrough"是瀏覽器的你是否可以開始播放歌曲，現在猜測，這將不停止運行（數據留下來下載基於量，這首歌是如何快速當前正在下載）。

audio.addEventListener("canplay", function() { audio.play(); }); 

"durationchange"是應該發生火災時的持續時間變化的事件。
對於沒有元數據或不支持元數據的文件類型，文件開始加載時整個持續時間可能不可用。
在這種情況下，audio.duration可以通過瀏覽器下載的媒體的第一位進行更新，然後在最後，並在文件的長度，使一個受過教育的猜測，或持續時間可能來自其加載更多的瀏覽器和更多的文件，並增加持續時間。我們在支持方面，我不知道。

audio.addEventListener("durationchange", function() { 
    player.time.duration.update(audio.duration); 
}); 

"progress"是觸發一個事件〜250ms的數據即將在（在下載文件）。
progress告訴你，已經對可供查找的數據進行了更新。

這使得它用來檢查你audio.buffered對象，以更新進度條的「裝」部分的好事件。

audio.addEventListener("progress", function() { 
    player.progressBar.update(audio.buffered.start(0), audio.buffered.end(0)); 
}); 

然後您可以使用"timeupdate"來處理播放。
timeupdate會更新第二幾次，如正在播放的歌曲（如audio.currentTime向前移動）。