HTMLのaudio要素でWebサイトにBGM（背景音楽）を追加する方法

HTMLの<audio>要素とその各種属性を使えば、Webサイトに背景音楽（BGM）やオーディオファイルを簡単に組み込めます。本記事では基本のコードから実用的な属性、ブラウザ対応状況まで丁寧に解説します。

BGMを追加する基本のコード

Webサイトに背景音楽やオーディオを追加するには、HTMLのaudio要素（<code><audio>...</audio></code>）を使用します。

例えば、「ユーザーがサイトを訪れた瞬間にバックグラウンドで再生したいオーディオファイルがある」というケースを想定してみましょう。その場合の基本的なHTMLコードは次のとおりです。

<audio autoplay>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

<code><audio></code>要素の<code>src</code>属性には、サイト内部のファイルでも外部ホスティングのファイルでも、どちらのオーディオソースでも指定できます。

ここで注目したいのが<code>autoplay</code>属性です。ユーザーがページにアクセスした時点で自動的に音声を再生したい場合は、この属性が必要になります。

デモ：音量を絞った状態でクリックすると、実際の動作を確認できます。

対応しているオーディオ形式

HTMLでサポートされているオーディオ形式は「MP3」「WAV」「OGG」の3種類です。<code><audio></code>要素では、<code>type</code>属性で形式を指定します。

このチュートリアルではWAV形式を使用しているため、上記コードの<code><source></code>要素に<code>type="audio/wav"</code>属性を指定しています。

audio要素の主な属性

<code><audio></code>要素には、きめ細かな再生制御を可能にする便利な属性がいくつか組み込まれています。ここでは特によく使われる4つの属性を紹介します。

BGMをループ再生する

背景音楽を繰り返し再生したい場合は、<code>loop</code>属性を追加します。

<audio autoplay loop>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

BGMをミュートする

音声をミュート状態にしておきたい場合は、<code>muted</code>属性を追加します。

<audio muted>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

<code>muted</code>属性はどんなときに役立つのでしょうか。たとえば、要素自体をページから削除することなく、一時的に音源を無効化し、後で再度有効化したいような場面で便利です。

コントロールUIを表示する

再生・一時停止などの操作ボタンを表示するには、<code>controls</code>属性を使用します。

<audio controls>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

これで、ユーザーは自分の好きなタイミングで再生ボタンを押して音声を聴けるようになります。

ブラウザごとのオーディオ形式の対応状況

• MP3：すべての主要ブラウザで対応
• WAV：Edge/IEを除くすべてのブラウザで対応
• OGG：Edge/IEおよびSafariを除くすべてのブラウザで対応

※2020年7月時点の情報です。

ポイント：プライマリのファイル形式に対応していないブラウザを使うユーザーに備えて、<code><audio></code>要素内に予備の<code><source></code>を追加しておくと安心です。

<audio controls>
  <source src="your-audio-file.wav" type="audio/wav" />
  <source src="your-audio-file.mp3" type="audio/mpeg" />
</audio>

このように書いておけば、ユーザーのブラウザがWAV形式に非対応の場合でも、自動的にMP3の方が再生されます。

注意：最近のブラウザの自動再生ポリシー

ChromeやSafariなどのモダンブラウザでは、ユーザーがページを操作する前に音付きのコンテンツを勝手に再生させないよう、<code>autoplay</code>がブロックされる仕様になっています。確実にBGMを再生したい場合は、<code>controls</code>属性を付けてユーザー自身に再生してもらう設計にするか、ユーザーのクリック操作をトリガーにJavaScriptで再生を開始する方法がおすすめです。