HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<audio>
音声コンテンツを文書に埋め込むための要素です。音楽、ポッドキャスト、効果音などの再生に使用されます。
info
概要
<audio> 要素は、HTML5から導入されたメディア要素の一つで、ウェブページに音声コンテンツを埋め込み、再生できるようにします。
外部プラグイン（Flashなど）を使用せずに、標準的なブラウザ機能で音声を扱うことが可能です。
play_circle
デモ (静的表示)
HTML (Source)
<audio controls src="audio/sample.mp3">
音声ファイルを再生するには
ブラウザの更新が必要です。
</audio>
<br><br>
<audio controls loop preload="none">
<source src="audio/bgm.ogg" type="audio/ogg">
<source src="audio/bgm.mp3" type="audio/mpeg">
<p>お使いのブラウザは音声要素に対応していません。</p>
</audio>
Preview (Result)
[2つ目のaudio要素のプレビュー]
ブラウザに依存する標準コントロールが表示されます。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| src | 埋め込む音声ファイルのURL。**`<source>`** 要素を使用する場合は省略可能です。 |
| controls | 指定すると、ブラウザ標準の再生、一時停止、音量などのコントロールパネルが表示されます。**必須**。 |
| autoplay | ページ読み込み後にすぐに自動再生を開始します（多くのブラウザで制限されています）。 |
| loop | 音声の終端に達したときに、最初から再生を繰り返します。 |
| muted | デフォルトで音声をミュート（消音）にします。 |
| preload | 音声ファイルの事前読み込み方法を指定します。none: 読み込まないmetadata: メタデータのみauto: ファイル全体を読み込む
|
code
実用例
1. 基本的な音声再生（コントロール表示）
<audio src="audio/intro.wav" controls>
お使いのブラウザは <span class="code-tag"><audio></span> 要素に対応していません。
</audio>
2. 複数のファイル形式を指定（フォールバック）
<audio controls>
<source src="audio/music.ogg" type="audio/ogg">
<source src="audio/music.mp3" type="audio/mpeg">
<p>対応する音声形式が見つかりませんでした。</p>
</audio>
3. 自動再生とミュート（BGMなど）
<audio src="audio/bgm.mp3" autoplay loop muted>
<!-- 自動再生にはmuted属性が推奨（または必須）です -->
</audio>
lightbulb
知っておくべき重要事項
security
自動再生（Autoplay）に関する注意
多くのモダンブラウザでは、ユーザーの操作なしに音付きのメディアを自動再生することは禁止されています。自動再生を有効にするには、**`muted`** 属性を同時に設定するか、ユーザーのジェスチャー（クリックなど）を待つ必要があります。
多くのモダンブラウザでは、ユーザーの操作なしに音付きのメディアを自動再生することは禁止されています。自動再生を有効にするには、**`muted`** 属性を同時に設定するか、ユーザーのジェスチャー（クリックなど）を待つ必要があります。
accessibility_new
アクセシビリティ
音声コンテンツには、聴覚障害のあるユーザーのために、可能であれば**トランスクリプト（文字起こし）**を提供することを推奨します。また、コントロールが提供されていることを確認してください（`controls` 属性）。
音声コンテンツには、聴覚障害のあるユーザーのために、可能であれば**トランスクリプト（文字起こし）**を提供することを推奨します。また、コントロールが提供されていることを確認してください（`controls` 属性）。