HTML5 オーディオ

Volardev 編集部 April 12, 2026

HTML5 の登場以前、Web ページで音声を再生するには Flash などのプラグインが必要でした。現在は <audio> 要素を使用することで、ブラウザが標準機能として音声を再生できます。

1. 基本的なマークアップ

音声を埋め込むための最も標準的なコードです。controls 属性を忘れると、プレイヤーが画面に表示されない（＝ユーザーが操作できない）ため注意が必要です。

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  お使いのブラウザは audio 要素をサポートしていません。
</audio>

ビデオと同様、ブラウザによってサポートする音声形式が異なる場合があります。複数の <source> を用意しておくことで、ブラウザが「自分が再生できる形式」を上から順に探してくれます。

音声の挙動をカスタマイズするための属性です。

属性	説明
`controls`	再生・一時停止・音量・シークバーのコントローラーを表示します。
`autoplay`	ページ読み込み時に自動で再生を開始します（ブラウザにより制限あり）。
`muted`	デフォルトで消音状態にします。
`loop`	再生が終わった後、自動的に最初から繰り返します。
`preload`	データを事前に読み込むかどうか（`auto`, `metadata`, `none`）を指定します。

[!IMPORTANT]
自動再生の制限:
ビデオと同様に、多くのモダンブラウザはユーザーの操作なしに「音が出るメディア」を自動再生することを禁止しています。BGM などを自動で流したい場合は、JavaScript でユーザーのクリックをトリガーにするなどの工夫が必要です。

Web で一般的に使用される 3 つの形式です。

<audio> 要素には ID を付与することで、JavaScript からプログラム的に操作することも可能です。

var x = document.getElementById("myAudio");

function playAudio() {
  x.play(); // 再生
}

function pauseAudio() {
  x.pause(); // 一時停止
}

チェック項目	推奨設定
互換性	迷ったら MP3 を優先的に用意する。
アクセシビリティ	基本的には `controls` を表示し、ユーザーが音量を調節できるようにする。
UX 設計	ユーザーの意図しない自動再生（突然音が鳴る）は避ける。

HTML5 オーディオを使えば、ポッドキャストの配信や効果音の実装も驚くほど簡単になりますね。