Q&A
例えば以下のようなHTMLとJavascriptがあります。
HTML
1//test.html 2<!DOCTYPE html> 3<html> 4<body> 5</body> 6<script type="text/javascript" src="./test.js"></script> 7</html>
javascript
1//test.js 2window.requestAnimFrame = (function () { 3 return window.requestAnimationFrame || 4 window.webkitRequestAnimationFrame || 5 window.mozRequestAnimationFrame || 6 window.oRequestAnimationFrame || 7 window.msRequestAnimationFrame || 8 function (callback) { 9 window.setTimeout(callback, 1000 / 60); 10 }; 11})(); 12 13var testsound; 14testsound = new Audio(); 15testsound.src = "./test.mp3"; 16 17function loop() { 18 requestAnimFrame(loop); 19 testsound.play(); 20} 21 22loop();
Javascript内でMP3ファイルを読み込んで再生するというものなのですが、これを実行すると私が調べた限りではおそらくはブラウザのキャッシュMP3が存在すればHTMLを表示したときに音がなります。キャッシュになければtestsound.play()でDOM Exceptionエラーになります。
実際にMP3ファイルを読むまで待たなければならないようなのですがこれを待つ、あるいは待ってからJavascript側全体を実行させる方法はありますでしょうか？
回答2件
0
ベストアンサー
HTMLMediaElement に定義されたイベントを購読すれば再生可能なタイミングを知ることができます。
再生可能（ただし途中でバッファリングの必要あり）になったら canplay が、バッファの必要なく最後まで再生可能になったら canplaythrough が発火するようです。
js
1testsound.addEventListener('canplaythrough', () => { 2 testsound.play() 3})
投稿2019/07/12 05:43
編集2019/07/12 05:47
総合スコア93
0
実際にMP3ファイルを読むまで待たなければならないようなのですがこれを待つ、あるいは待ってからJavascript側全体を実行させる方法はありますでしょうか？
addEventListenerでloadeddata でしょうか。
投稿2019/07/12 05:36
総合スコア80850
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。