<audio></audio>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ（controls属性がある場合） / パルパブル・コンテンツ（controls属性がある場合） |
| 利用場所 | エンベッディッド・コンテンツが置ける場所 |
| 内容 | src属性がある場合：0個以上のtrack要素、その後にトランスペアレント（親要素のコンテンツモデルを継承） / src属性がない場合：0個以上のsource要素、その後に0個以上のtrack要素、その後にトランスペアレント ただし、どちらの場合もvideo要素とaudio要素は含められない |
audio要素は、オーディオコンテンツを文書内に埋め込みます。この要素に対応しているブラウザでは、プラグインを使わずに音声や音楽などを再生することができます。
<audio src="example.mp3" autoplay loop></audio>
<audio preload="metadata" controls>
<source src="example.mp3" type="audio/mp3">
<source src="example.aac" type="audio/aac">
<source src="example.oga" type="audio/ogg">
</audio>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
src="" |
オーディオの指定 | URL | 埋め込むオーディオファイルのURL |
preload="" |
データの事前ロード | none |
事前ロードを行わない |
metadata |
メタデータだけは事前ロードする | ||
auto |
データ全体を事前ロードする | ||
| 空 | auto と同じ |
||
autoplay |
自動再生を行う | （autoplay） |
値は省略可能 |
loop |
ループ再生を行う | （loop） |
値は省略可能 |
muted |
音声を出さない | （muted） |
値は省略可能 |
controls |
コントローラを表示する | （controls） |
値は省略可能 |
crossorigin="" |
別オリジンにあるリソースの処理方法 | anonymous |
認証情報を使用せずにCORSリクエストを送信 |
use-credentials |
認証情報を使用してCORSリクエストを送信 | ||
| 空 | anonymous と同じ |
||
| 廃止属性（HTML Living Standardでは未定義） | |||
mediagroup="" |
 グループ名 |
文字列 | 属するグループの名前 |
- autoplay属性の指定は、preload属性の指定よりも優先されます。
- crossorigin属性の値を省略した場合は
anonymousになります。属性そのものを省略した場合はCORSリクエストを行いません。
オーディオファイルの指定方法
オーディオファイルは、audio要素のsrc属性で指定することができます。
<audio src="example.mp3"></audio>
複数の再生候補（形式の異なるオーディオデータ）を用意する場合は、audio要素内にsource要素を配置して、そのsrc属性でオーディオファイルを指定します。
<audio>
<source src="example.mp3">
<source src="example.aac">
<source src="example.oga">
</audio>
上記の例では、3タイプのオーディオファイルを指定しています（内容は全て同じ）。このように指定しておくことで、ブラウザ側が対応している形式で再生されるようになります。例えば、MP3形式に対応しているブラウザであれば、example.mp3 が再生されることになります。
- ブラウザが複数の形式に対応している場合は、先に記述されたオーディオデータが使用されます。
代替コンテンツについて
audio要素の内容には、この要素に対応していないブラウザ向けの代替コンテンツを配置できます。
次の例では、audio要素に対応していない場合は、音声ファイルへのリンクが表示されるように指定しています。（代替コンテンツはsource要素よりも後に配置します）
<audio>
<source src="example.mp3">
<source src="example.aac">
<source src="example.oga">
<a href="example.mp3">音声を聴く</a>
</audio>
preload属性について
preload属性は、事前ロードに関する情報をブラウザ側に伝えます。指定できる値は次の3つです。（ただし、必ずしも指定した通りの挙動になるとは限らないようです）
none- ページが表示された時点では、オーディオデータの読み込みは行いません。（オーディオを再生する時にデータの読み込みが開始されます）
metadata- ページが表示された時に、オーディオのメタデータ（再生時間などの情報）だけを読み込みます。
auto- ページが表示された時に、オーディオデータの読み込みを開始します。
<audio src="example.mp3" preload="metadata"></audio>
- preload属性の値に空文字（
preload=""）を指定した場合は、autoを指定した時と同じ扱いになります。 - この属性自体が指定されなかった場合は、事前ロードの挙動はブラウザ側に任されます。
- 同時にautoplay属性が指定されている場合は、上記の指定にかかわらず、ページが表示され時にオーディオデータの読み込みが開始されます。
autoplay属性について
autoplay属性は、オーディオの自動再生を指定します。この属性を指定すると、ページを読み込んだ時点で自動的に再生されるようになります。
<audio src="example.mp3" autoplay></audio>
loop属性について
loop属性は、オーディオのループ再生を指定します。この属性を指定すると、そのオーディオが繰り返し再生されるようになります。
<audio src="example.mp3" loop></audio>
muted属性について
muted属性は、音を出さずに再生することを指定します。
<audio src="example.mp3" muted></audio>
controls属性について
controls属性は、オーディオのコントローラ（再生、停止、ボリューム、等）を表示することを指定します。
<audio src="example.mp3" controls></audio>
- 旧HTMLからの変更点
-
- HTML5：audio要素が定義されました。
- HTML5.1：mediagroup属性が廃止されました。
使用例
- 音が出るのでボリュームにご注意ください。
<audio preload="metadata" controls>
<source src="media/example.aac" type="audio/aac">
<source src="media/example.oga" type="audio/ogg">
<source src="media/example.mp3" type="audio/mpeg">
<p>オーディオを再生することができませんでした。</p>
</audio>
- 表示例
- 音楽データはBright is the Ring of Words by Ron Meixsell and Wahneta Meixsell（YouTube オーディオライブラリ）を使わせていただきました。