JavaScript

レシピ

音声

音声ファイルを自動再生する

ページの読み込みと同時に、音声ファイルを自動再生する方法について解説します。

この記事のポイント

  • 音声ファイルの自動再生はaudio要素autoplay属性をつける
  • JavaScriptでautoplayプロパティtrueに設定しても自動再生できる
  • 現在の主要ブラウザは勝手に音が出てしまうことを防ぐために自動再生できない

音声ファイルの自動再生について

ページの読み込み完了したタイミングなどに音声ファイルを自動再生するときは、audio要素autoplay属性をつけるか、autoplayプロパティtrueに設定します。
ただし、現在の主要ブラウザでは自動再生によって勝手に音が出てしまうことを防ぐために、以下の条件のうちいずれも該当しない場合は自動再生ができない設定になっています。

  • 音量0、または消音(ミュート)
  • ブラウザで自動再生を許可(URLのホワイトリストへの追加)

また、ChromeやSafariなどwebkit系のブラウザでは、消音状態の音声ファイルの自動再生はブラウザで許可設定(URLをホワイトリストに追加)をしていないと再生されません。
ちなみに動画ファイルについては音量0か消音設定になっていれば自動再生可能です。

以下の例はHTMLのみで音声ファイルを自動再生する設定方法です。
audio要素autoplay属性muted属性を指定します。
消音状態の音声ファイルは再生しても視覚的な効果がなく分かりづらいため、controls属性も指定してコントローラーを表示しています。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <audio type="audio/mpeg" src="../audio/bgm01.mp3" autoplay muted controls></audio>
</article>

続いて、JavaScriptから自動再生を設定する方法を解説します。
以下の例は、先ほどのHTMLコードでaudio要素に指定したautoplay属性muted属性を取り除いて、JavaScriptからautoplayプロパティmutedプロパティtrueにして自動再生します。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <audio type="audio/mpeg" src="../audio/bgm01.mp3" controls></audio>
</article>

JavaScript コード例

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

  const audioElement = document.querySelector("audio");

  audioElement.addEventListener('loadeddata', (e)=> {
    audioElement.muted = true;
    audioElement.autoplay = true;
  });
});

ページの読み込みが完了したタイミングでquerySelectorメソッドを呼び出し、audio要素を取得して変数audioElementに入れます。

その後、取得したaudio要素に対してイベントリスナーを登録します。
イベント「loadeddata」は読み込んだ音声ファイルが再生できる状態になったら発生するイベントです。

そのため、ここでは音声ファイルが再生できる状態になった時点でautoplayプロパティmutedプロパティtrueにして、消音と自動再生を実行します。

なお、先述の通りwebkit系のブラウザでは上記のコードを実行しても音声ファイルは自動再生されません。
動作を確認する際はFirefoxを使用してください。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。