如何為HTML5音頻元素制作加載欄？

Question

我正在嘗試為HTML5音頻元素制作加載欄（顯示加載/緩沖的百分比）。

對於視頻標簽，可以使用以下方法進行計算：

video.buffered.end(0) / video.duration

但我無法使用音頻標簽。 它只返回一個修復值。

任何的想法？

謝謝！

Answer 1

在沒有檢查的情況下調用buffered end方法是不可靠的。 你有可能試圖無所事事地調用這個方法。 檢查這個小提琴：

 document.querySelector('span').innerHTML = document.querySelector('audio').buffered.length; 

 <audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio> <p>Buffered Length: <span></span></p> 

看到？ 在第一個開始時，緩沖長度為0 - 沒有加載任何內容。 在調用start或end方法之前，您需要確保緩沖長度不為0。

---

每次你讀buffered ，它確實是固定的。 因此，要獲得視覺上的“加載”效果，您需要一次又一次地閱讀它。

在這里，我嘗試每50毫秒更新一下加載和播放的百分比：

 var audio = document.querySelector('audio'); var percentages = document.querySelectorAll('span'); function loop() { var buffered = audio.buffered; var loaded; var played; if (buffered.length) { loaded = 100 * buffered.end(0) / audio.duration; played = 100 * audio.currentTime / audio.duration; percentages[0].innerHTML = loaded.toFixed(2); percentages[1].innerHTML = played.toFixed(2); } setTimeout(loop, 50); } loop(); 

 <audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio> <p>Loaded: <span></span>%</p> <p>Played: <span></span>%</p> 

注 ：您所在的位置可能無法訪問MP3文件。 如果是這種情況，請嘗試另一個對您有利的來源。 否則你會聽到一個非常漂亮的女聲，並不斷看到百分比變化，最終達到100％。

Answer 2

您可以使用以下代碼獲取HTML5音頻元素的進度並將其應用於<progress>元素：

var myAudio = document.getElementById('#myAudio');
var myProgressBar = document.getElementById('#myProgressBar'); 

myAudio.addEventListener('timeupdate', onLoadProgress);

function onLoadProgress () {
    var progress = parseInt(((myAudio.currentTime / myAudio.duration) * 100), 10);
    myProgressBar.value = progress; 
}

Answer 3

我不太確定我是否做了你的概率。 但這是我用來計算緩沖音量的方法

 var audio = document.querySelector('audio'); var set; window.onload = function(){set=setInterval(buffer,1000);}; function buffer () { if(audio.buffered.length>0){ var percent = (audio.buffered.end(0) / audio.duration) * 100; document.querySelector('p').innerHTML = percent+'%'; if(percent === 100){ clearInterval(set); } } } 

 <audio src="http://customhtml5video.000webhostapp.com/audio.mp3" controls></audio> <p></p> 

Answer 4

它返回的固定值是多少？ 你能創建一個簡單的jsfiddle來演示這個問題嗎？

這個html5醫生教程最近寫了，並且有關於HTML5音頻當前播放狀態的一些很好的信息。 在頁面中間的下一個提示看起來可能與您的情況相關：

您可能需要檢查durationchange事件，因為媒體下載時某些持續時間可能會發生變化。 此外，根據元數據是否可用，您可能需要等到音頻開始播放以檢查其持續時間。 簡而言之，請關注durationchange事件，並在持續時間尚未知曉時注意NaN值！