audioタグ終了後に別のaudioを再生させるには？

Question

audioタグで音楽を再生させ、その再生が終わった後、また別のaudioタグで別の音楽を自動的に読み込み再生させるにはどうしたら良いでしょうか？

Answer 1

登録したタグに任意のidやタグ名をつけてイベントリスナーにendedイベントを登録しDOMの操作でリソースを変更するという方法で実現できると思います。例えば，sourceタグを取得しリソースを入れ替えるなどです。例えばjQueryを使って(使わなくてもできますが)

function nextPlay(path){
return function(){
$("source").attr('src',path);
 }
}

//initialize関数内(例)
略...{
略...
var filepath=["path1","path2"]
var counter=0;
$("audio").addEventListener("ended",nextPlay(filepath[counter++]),false);
略...
}

参考程度にこんな感じです。多少融通効かない書き方だと思うので使用するのであれば適宣修正してください。

★video要素、audio要素をJavaScriptから操作する

また，Audioクラスのオブジェクトを作成してタスクシステムやキューのような構成の書き方もあるようです。ソースコードがたくさんネット上にあるみたいなので探してみるといいと思います。

JavaScript で HTML5 Audio を使ってサウンド再生. 連続再生対策してるからゲームの SE にも使えるよん♪

Answer 2

手前味噌で恐縮ですが、Videoタグで連続再生を実装しました。
audioタグでも同じように使えると思いますので、参考になれば幸いです。
HTML5 Video でプリロード動画広告を再生可能にする
ソースはGithubにて