Javascript内でのオブジェクトの読み込みタイミングについて

例えば以下のような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件

ベストアンサー

HTMLMediaElement に定義されたイベントを購読すれば再生可能なタイミングを知ることができます。

再生可能（ただし途中でバッファリングの必要あり）になったら canplay が、バッファの必要なく最後まで再生可能になったら canplaythrough が発火するようです。

js
1testsound.addEventListener('canplaythrough', () => {
2  testsound.play()
3})

投稿2019/07/12 05:43

編集2019/07/12 05:47

uasi

総合スコア93

実際にMP3ファイルを読むまで待たなければならないようなのですがこれを待つ、あるいは待ってからJavascript側全体を実行させる方法はありますでしょうか？

addEventListenerでloadeddata　でしょうか。

MDN:HTMLAudioElement#基本的な使用

投稿2019/07/12 05:36

m.ts10806

総合スコア80890

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問