JavaScript

最終更新日:
公開日:

レシピ

音声

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

audio要素で読み込んだ音声ファイルを再生したり、一時停止する方法について解説します。

この記事のポイント

  • ページで読み込んだ音声ファイルの再生/一時停止を制御するときはまず対象のaudio要素を取得する
  • 再生をするときはplayメソッド、一時停止はpauseメソッドを使う

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

サイトのページ上で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メソッドを実行します。