クリックやポップアップなしでHTMLのaudio要素を1つずつ順番に再生する方法

HTMLの<audio>要素を複数配置し、前の音声が終わったタイミングで次の音声を自動的に再生したいケースはよくあります。ユーザーにいちいちクリックさせたり、ポップアップを表示したりせずに連続再生を実現するには、JavaScriptのonendedイベントを活用するのが最もシンプルです。

手順1：audio要素を用意する

まず、再生したい音声ファイルごとに<audio>ブロックを記述します。以下のように、識別用のidを付けて複数の音声を定義しましょう。

<audio id="one">
  <source src="new1.mp3" type="audio/mp3">
</audio>
<audio id="two">
  <source src="new2.mp3" type="audio/mp3">
</audio>

手順2：onendedイベントで連続再生を実装する

次に、JavaScriptを使って「1つ目の音声が終了したら2つ目を再生する」という処理を追加します。onendedイベントは音声の再生が完了した瞬間に発火するため、その中で次の<audio>要素のplay()メソッドを呼び出すだけで連続再生が実現できます。

var one = document.getElementById('one');
one.onended = function() {
  document.getElementById('two').play();
}
one.play();

コードの解説

• document.getElementById('one')：idが「one」のaudio要素を取得します。
• one.onended：1つ目の音声の再生が終わったときに実行される関数を設定します。
• play()：終了後、2つ目の音声（id「two」）の再生を開始します。
• one.play()：ページ読み込み後に最初の音声の再生を開始します。

注意点：ブラウザの自動再生制限

近年のブラウザには自動再生制限（オートプレイポリシー）があり、ユーザーの操作なしに音声を再生できない場合があります。特にChromeなどでは、ページ上でユーザーが何らかの操作を行った実績がないとplay()が失敗することがあります。そのような場合は、ボタンクリックなどを起点として最初の音声を再生する構成にすると確実に動作します。

また、3つ以上の音声を連続再生したい場合は、onendedをさらにチェーンしてもよいですが、音声ファイルのパスを配列で管理し、再生が終わるごとに次の要素へ差し替える方式にすると、コードが簡潔で保守しやすくなります。