如何檢查HTML5音頻元素是否已加載？

Question

我想知道如何檢查是否加載了HTML5音頻元素。

Answer 1

要了解音頻何時可以開始播放，請添加聽衆oncanplay or oncanplaythrough events。要找出當音頻加載可言，聽onloadeddata event：

<audio oncanplay="myOnCanPlayFunction()" 
     oncanplaythrough="myOnCanPlayThroughFunction()" 
     onloadeddata="myOnLoadedData()" 
     src="myaudio.ogg" 
     controls> 
    <a href="myaudio.ogg">Download</a> 
</audio> 

<script> 
function myOnCanPlayFunction() { console.log('Can play'); } 
function myOnCanPlayThroughFunction() { console.log('Can play through'); } 
function myOnLoadedData() { console.log('Loaded data'); } 
</script> 

Answer 2

退房robertc對如何使用事件偵聽器的答案。您也可以直接查看音頻元素的就緒狀態：

var myAudio = $('audio')[0]; 

var readyState = myAudio.readyState; 

readyState將是一個數字。從Mozilla's docs：

• 0 - 沒有關於媒體資源的信息。
• 1 - 已檢索到足夠的媒體資源，以便初始化元數據屬性。尋求不會再引發例外。
• 2 - 數據可用於當前播放位置，但不足以實際播放多個幀。
• 3 - 可獲得當前播放位置以及至少未來一小段時間的數據（換句話說，至少有兩幀視頻）。
• 4 - 有足夠的數據可用 - 並且下載速率足夠高 - 可以在不中斷播放媒體的情況下結束播放。