私も質問文と似たことを感じて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イベントで曲の終了を確認することが可能となります。
こんな感じでどうでしょう?確認してみてください。
JavaScript
1audio.addEventListener("ended", function() {
2 audio.currentTime = 0;
3 audio.play();
4}, false);
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/12 03:36