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の答えをチェックしてください。また、直接、audio要素の準備状態をチェックすることができます。

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

var readyState = myAudio.readyState; 

readyStateは数になります。 Mozilla's docs：

• 0 - メディアリソースに関する情報はありません。
• 1 - メタデータ属性が初期化されているメディアリソースが十分に取得されました。 Seekingはもはや例外を発生しません。
• 2 - データは現在の再生位置で使用できますが、実際に複数のフレームを再生するには十分ではありません。
• 3 - 現在の再生位置だけでなく、将来の少なくとも少しの時間のためのデータが利用可能である（換言すれば、例えば少なくとも2フレームのビデオ）。
• 4 - 十分なデータが利用可能であり、ダウンロード速度が十分に高いため、中断することなくメディアを最後まで再生できます。