質問: true; //再生 audio.play(); } ```
回答: 私も質問文と似たことを感じてBGMのループに関して研究してました。 BGMをループ再生させるWebアプリ 私のブログが役立てるかと思ったら、 全くそうでもない単なるチラ裏程度のものしか残ってませんでした。。。 Web Sounder HTML5の音楽系の仕様はこのサイトが一番詳細です。 ざっくり説明しますと、 HTML5が用意している音楽系APIは2パターン存在し、互換性はほぼありません。 つまり自由に行き来することが出来ません。 `HTMLMediaElement`と`Web Audio API`の2系統があり、 質問文はauduoタグなので前者であり、後者のAPIの恩恵はほぼ受けることが出来ません。 HTMLMediaElement これがaudioタグでJavaScript側から出来ることの全てです。 翻訳があまり進んでなくて読みづらいですが、これに目を通さないと話にならないので是非。 ★video要素、audio要素をJavaScriptから操作する こちらの方が読みやすいので、先にこっちに目を通しても良いかもしれません。 今回の要件ですとループに必要なのは、`audio.loop = true`ではなく、 曲が終わる直前の時刻になったら`audio.currentTime = 0`と代入してあげることです。 どうやって曲の終了を見分けましょうか? audioにはtimeupdateというイベントが設定されており、曲の再生中時刻が上書きされるのでポンポンtimeupdateが呼ばれますが、1秒に一桁回数程度の頻度でしか呼ばれません。 私はLoopBGMというサイトの制作を通じて何度も曲のつながりを確認しましたが、 10ms以上ずれるとほぼ確実に耳に違和感が残ります。 最低でも1秒間に60回程度の頻度で確認する必要があり、曲の部分ループの実装に苦労しました。 まぁ、最終的にはaudioタグはすっぱり諦めて`Web Audio API`の仕様にガッツリ寄せて頑張りました。 今回は音楽ファイルの最初と最後ということなので、`audio.loop`を切りましょう そうすればaudioのendedイベントで曲の終了を確認することが可能となります。 こんな感じでどうでしょう?確認してみてください。 ``` audio.addEventListener("ended", function() { audio.currentTime = 0; audio.play(); }, false); ```