JavaScriptで音声ファイルを連続で鳴らしたい

Question

ホームページ上でいくつかの音声ファイルを連続で鳴らしたいのです。

<script>
(new Audio("d.mp3")).play();
(new Audio("e.mp3")).play();
</script>

このやり方ですと、音が同時になってしまいます。
前の音声が終わってから次の音声を鳴らすにはどのように書けばよいのでしょうか？
よろしくお願い致します。

Answer 1

試したことないですけど、Audioにはendedというイベントがあるようなので、こうしたら行けるのではないでしょうか。

var a = new Audio("a.mp3");
var b = new Audio("b.mp3");
var c = new Audio("c.mp3");

// aのendedを検知するための処理
a.addEventListener("ended", function(e) {
  // bの再生開始
  b.play();
});

// bのendedを検知するための処理
b.addEventListener("ended", function(e) {
  // cの再生開始
  c.play();
});

※コメントにあった3つの場合に対応

Comments

[axs]

ありがとうございます！
早速やってみて成功しました！

ただ、3連続の場合がうまく行きませんでした。。。

<script>
var a = new Audio("a.wav");
a.addEventListener("ended", function(b) {
(new Audio("b.wav")).play();
});
a.addEventListener("ended", function(c) {
(new Audio("c.wav")).play();
});

a.play();
</script>

間違いを指摘して頂くとありがたいです。
よろしくお願い致します。

[masaya_ohashi]

あなたの提示したコードはどちらも「a.addEventListener」なので、aの再生が終わったときの処理を2つ登録していることになります。これではaの再生終了と同時にbとcが両方スタートします。aの終了を検知したらbの再生開始、bの終了を検知したらcの再生開始、と組まなければいけません。

[axs]

なるほど！
問題解決しました！！
ありがとうございました。