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

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

ページの読み込み完了したタイミングなどに音声ファイルを自動再生するときは、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を使用してください。

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

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