audioタグ
audioは、オーディオファイルを埋め込むタグです。
解説
audioタグを使うと、プラグインのインストールが不要で簡単にオーディオファイルを埋め込むことができます。
環境によって異なるフォーマットのファイルを用意したい場合は、子要素にsourceタグを指定します。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ エンベッディッド・コンテンツ インタラクティブ・コンテンツ |
| コンテキスト (親カテゴリ) | エンベッディッド・コンテンツを許可する場所 |
| コンテンツ・モデル (子カテゴリ) | trackタグ、sourceタグ |
属性
audioタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| src | オーディオファイルを指定する （例）src="sample.mp3" |
| autoplay | 自動再生する （例）自動再生したい場合 ⇒ autoplay ※下記備考欄もご覧ください。 |
| controls | コントローラー（再生・停止ボタン等）を表示する （例）コントローラーを表示したい場合 ⇒ controls |
| loop | 繰り返し再生する （例）繰り返し再生をしたい場合 ⇒ loop |
| preload | 事前読込み方法を指定する auto：事前読込みする（デフォルト） metadata：メタデータのみ事前読込みする none：事前読込みしない （例）preload="none" |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
オーディオファイル（sample.mp3）を埋め込む
<audio src="sample.mp3">
<p>お使いの環境ではaudioタグに対応していません。</p>
</audio>
オーディオファイル（sample.mp3）を埋め込み、自動再生する
<audio src="sample.mp3" autoplay>
<p>お使いの環境ではaudioタグに対応していません。</p>
</audio>
オーディオファイル（sample.mp3）を埋め込み、コントローラーを表示する
<audio src="sample.mp3" controls>
<p>お使いの環境ではaudioタグに対応していません。</p>
</audio>
コントローラーが表示されます。
オーディオファイル（sample.mp3とsample.aac）を埋め込み、コントローラーを表示する
<audio controls>
<source src="sample.mp3">
<source src="sample.aac">
<p>お使いの環境ではaudioタグに対応していません。</p>
</audio>
備考
- audioタグは、HTML5から新たに追加になったタグです。
- ChromeやSafariでは、ポリシーの観点から自動再生はされません。
（autoplay属性は無視されます）
