audioタグ -音声ファイルを埋め込んで再生する｜HTML辞典
<audio>タグとは？
<audio> タグは、HTML文書内で音声ファイルを埋め込んで再生するためのタグ です。<source> タグを使用することで、異なるフォーマットの音声ファイルを指定し、再生できるブラウザの互換性を向上させることができます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、エンベッデッドコンテンツ（Embedded Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<audio> は開始タグ（<audio>）と閉じタグ（</audio>）の両方が必要です。
基本的な記述方法
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
お使いのブラウザはオーディオ要素をサポートしていません。
</audio>使用できる主な属性
<audio> タグには複数の属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
src | 音声ファイルのURLを指定（<source> を使わない場合） | <audio src="audio.mp3" controls></audio> |
controls | 再生コントロールを表示 | <audio controls>...</audio> |
autoplay | ページ読み込み時に自動再生（ミュートが必要） | <audio autoplay muted>...</audio> |
loop | 音声をループ再生 | <audio loop>...</audio> |
muted | 音声をミュート状態で開始 | <audio muted>...</audio> |
preload | 音声の事前読み込み設定 | <audio preload="auto">...</audio> |
CSSを使ったデザイン変更
オーディオプレイヤーのスタイルを調整したい場合は、CSSを活用できます。
audio {
width: 100%;
max-width: 300px;
}適切な使用例
✅ 音声を再生できるコントロールを表示する
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
お使いのブラウザはオーディオ要素をサポートしていません。
</audio>✅ autoplay を使用して自動再生する（ミュート推奨）
<audio autoplay muted>
<source src="background-music.mp3" type="audio/mpeg">
</audio>✅ loop を使用して音声を繰り返し再生する
<audio controls loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>✅ preload を使用して読み込み設定を調整する
<audio controls preload="auto">
<source src="audio.mp3" type="audio/mpeg">
</audio>適切でない使用例（誤った使い方）
❌ <audio> タグ内に <source> なしで src を使用するのは非推奨
<!-- NG: <source> を使わずに <audio> で直接指定 -->
<audio src="audio.mp3" controls></audio>✅ 正しい書き方（<source> を使用）
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>❌ autoplay を使う際に muted を指定しないとブラウザでブロックされる
<!-- NG: autoplay のみでは再生されない -->
<audio autoplay>
<source src="audio.mp3" type="audio/mpeg">
</audio>✅ 正しい書き方（muted を追加）
<audio autoplay muted>
<source src="audio.mp3" type="audio/mpeg">
</audio><audio>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<audio> | 音声ファイルを再生 | controls でプレイヤー表示 | BGM、音声コンテンツの埋め込み |
<video> | 動画を埋め込む | controls で再生可能 | 動画コンテンツの埋め込み |
<source> | 音声や動画のソース指定 | <audio> や <video> 内で使用 | 互換性向上のための複数フォーマット指定 |
<iframe> | 外部コンテンツの埋め込み | YouTubeなどの動画埋め込み | 外部プレイヤーの利用 |
使用上の注意点
✅ controls を指定してユーザーが操作できるようにする
- ユーザーが再生・停止できるように
controlsをつけるのが推奨される。
✅ autoplay を使用する場合は muted をセットにする
- ユーザー操作なしで自動再生する場合は、ミュートが必須（ブラウザによっては
autoplayだけでは動作しない）。
✅ preload を適切に設定する
auto：ページ読み込み時に音声を事前読み込み（デフォルト）。metadata：音声のメタデータのみを読み込み。none：ページ読み込み時に音声を読み込まない。
関連タグ
まとめ
<audio>タグは、HTML文書内で 音声ファイルを埋め込んで再生するためのタグ です。<source> を使用して複数フォーマットを指定し、controls を追加してユーザーが操作できるようにするのが一般的な使い方です。
