audio要素

audio要素は、音楽や音声などのオーディオ・ファイルを、ドキュメントへ埋め込む要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、エンベディッド・コンテンツ。
controls属性を指定した場合、インタラクティブ・コンテンツ、パルパブル・コンテンツ。
コンテキスト エンベディッド・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル src属性を指定した場合、０個以上のtrack要素、その後、トランスペアレント・コンテンツ・モデル。ただし、メディア要素（video要素とaudio要素）を子孫要素に持つことはできない。
src属性を指定しなかった場合、０個以上のsource要素、次に、０個以上のtrack要素、その後、トランスペアレント・コンテンツ・モデル。ただし、メディア要素（video要素とaudio要素）を子孫要素に持つことはできない。
属性 グローバル属性。
任意属性：src属性、crossorigin属性、preload属性、autoplay属性、mediagroup属性、loop属性、muted属性、controls属性。
ブラウザ対応

構文

audio要素にオーディオ・ファイルを指定

audio要素のsrc属性に、オーディオ・ファイルのURLを指定する場合。

<audio src="URL">代替コンテンツ</audio>

src属性に指定したオーディオ・ファイルが利用できない場合、代替コンテンツを表示する。

source要素にオーディオ・ファイルを指定

source属性のsrc属性に、オーディオ・ファイルのURLを指定する場合。

<audio>
	<source src="URL" type="MIMEタイプ">
	代替コンテンツ
</audio>

src属性に指定したオーディオ・ファイルが利用できない場合、代替コンテンツを表示する。

MIMEタイプ
  • audio/mp3：MP3
  • audio/wav：Wav
  • audio/ogg：Ogg

要点

  • audio要素は、音楽や音声などのオーディオ・ファイルを、ドキュメントへ埋め込む要素である。
  • audio要素は、MP3、Wav、Oggの３つのオーディオ・ファイル形式に対応している。ただし、各ブラウザが全てのオーディオ・ファイル形式に対応しているわけではない。
  • audio要素は、HTML5にて新たに導入された要素である。

オーディオ・ファイル形式別ブラウザ対応

オーディオ・ファイル形式 ブラウザ対応
MP3
Wav
Ogg

属性

任意属性

属性 説明
src属性 埋め込むオーディオ・ファイルのURLを指定する属性。
crossorigin属性 CORSの設定をする属性。
preload属性 ページ読み込み時に、オーディオ・ファイルも読み込むべきかどうかを指定する属性。
autoplay属性 埋め込みオーディオを自動再生するかどうかを指定する属性。
mediagroup属性 メディアグループ名を指定する属性。
loop属性 埋め込みオーディオをループ再生（繰り返し再生）するかどうかを指定する属性。
muted属性 埋め込みオーディオの音をミュート（消音）するかどうかを指定する属性。
controls属性 埋め込みオーディオを制御するユーザー・インターフェイス（UI）を表示するかどうかを指定する属性。

サンプルコード

MP3

audio要素にオーディオ・ファイルを指定
<audio src="sample.mp3">代替コンテンツ</audio>
source要素にオーディオ・ファイルを指定
<audio>
	<source src="sample.mp3" type="audio/mp3">
	代替コンテンツ
</audio>

Wav

audio要素にオーディオ・ファイルを指定
<audio src="sample.wav">代替コンテンツ</audio>
source要素にオーディオ・ファイルを指定
<audio>
	<source src="sample.wav" type="audio/wav">
	代替コンテンツ
</audio>

Ogg

audio要素にオーディオ・ファイルを指定
<audio src="sample.ogg">代替コンテンツ</audio>
source要素にオーディオ・ファイルを指定
<audio>
	<source src="sample.ogg" type="audio/ogg">
	代替コンテンツ
</audio>

サンプル

HTMLソースコード

<p>audio要素にオーディオ・ファイルを指定： <audio src="sample-audio.mp3" controls style="vertical-align: middle;">sample-audio.mp3を再生できないようです。</audio></p>
<p>source要素にオーディオ・ファイルを指定： 
	<audio controls style="vertical-align: middle;">
		<source src="sample-audio.mp3" type="audio/mp3">
		sample-audio.mp3を再生できないようです。
	</audio>
</p>

実際の表示

audio要素にオーディオ・ファイルを指定：

source要素にオーディオ・ファイルを指定：