web-dev-qa-db-ja.com

HTML5オーディオ要素がロードされているかどうかをどのように確認しますか？

HTML5オーディオ要素がロードされているかどうかを確認する方法を知りたいです。

javascripthtml5-audio
34
auragar

オーディオが再生を開始する準備ができたことを確認するには、 oncanplayまたはoncanplaythroughイベント のリスナーを追加します。オーディオがロードされたことを確認するには、 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>
47
robertc

イベントリスナーの使用方法については、robertcの回答をご覧ください。オーディオ要素の準備状態を直接確認することもできます：

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

var readyState = myAudio.readyState;

readyStateは数値になります。 Mozillaのドキュメント から：

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