音声ファイルの再生、一時停止を操作する

ページ上で音声ファイルを再生／一時停止する

サイトのページ上でmp3形式などの音声ファイルをBGMとして再生したり一時停止するときは、audio要素をJavaScriptからアクセスして制御します。
再生をするときはplayメソッド、一時停止はpauseメソッドを使います。

サンプルコードはこちら

以下のHTMLではaudio要素を音声ファイルの読み込みで使用し、再生と一時停止ができるように2つのbutton要素を用意します。

HTML コード例

<audio src="./audio/bgm01.mp3" type="audio/mpeg"></audio>
<button id="btn_play">再生</button>
<button id="btn_pause">一時停止</button>

続いて、JavaScriptでbutton要素が押された時に再生や一時停止ができるように設定します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

  const btn_play = document.getElementById("btn_play");
  const btn_pause = document.getElementById("btn_pause");
  const audioElement = document.querySelector("audio");

  btn_play.addEventListener("click", e => {
    audioElement.play();
  });

  btn_pause.addEventListener("click", e => {
    audioElement.pause();
  });
});

id属性を使って2つのボタンを取得し、さらにaudio要素をquerySelectorメソッドで取得します。

再生ボタン「btn_play」ではクリックされたらplayメソッドを実行し、もう1つの一時停止ボタン「btn_pause」はpauseメソッドを実行します。