<audio></audio>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ（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.m4a" type="audio/aac">
<source src="example.ogg" type="audio/ogg">
</audio>
属性 値
任意属性
src="" 音声の指定 URL 埋め込む音声のURL
preload="" 先読みの目安 none 先読みを必要としない
metadata メタデータだけは先読みしてほしい
auto 音声全体を先読みしてほしい
mediagroup="" グループ名（HTML 5.1では廃止） 文字列 属するグループの名前
autoplay 自動再生を行う （autoplay） 値は省略可能
loop ループ再生を行う （loop） 値は省略可能
muted 音声を出さない （muted） 値は省略可能
controls コントローラを表示する （controls） 値は省略可能
crossorigin="" 別ドメインにあるリソースの扱い方法 anonymous 認証を利用しない
use-credentials 認証を利用する
  • autoplay属性の指定は、preload属性の指定よりも優先されます。
  • crossorigin属性は、CORS (Cross-Origin Resource Sharing)の仕組みを利用して、別ドメインのリソースにアクセスする際の扱いを指定するもの、だそうです。値が省略された場合のデフォルト値は anonymous、属性そのものが省略された場合はCORSを利用せずにアクセスします。（詳細未確認）

音声ファイルの指定方法

音声ファイルは、audio要素のsrc属性で指定することができます。

<audio src="example.mp3"></audio>

複数の再生候補（形式の異なる音声データ）を用意する場合は、audio要素内にsource要素を配置して、そのsrc属性で音声ファイルを指定します。

<audio>

<source src="example.mp3">
<source src="example.m4a">
<source src="example.ogg">

</audio>

上記の例では、3タイプの音声ファイルを指定しています（内容は全て同じ）。このように指定しておくことで、ブラウザ側が対応している形式（ファイル）で再生されるようになります。例えば、MP3形式に対応しているブラウザであれば、example.mp3が再生されることになります。

音声の形式について

ブラウザの種類により、再生できる音声形式が異なります。

形式 対応ブラウザ MIMEタイプ 拡張子
MP3 IE、Chrome、Safari、Firefox audio/mp3 .mp3
AAC IE、Chrome、Safari、Firefox audio/aac .m4a
Ogg Chrome、Firefox、Opera audio/ogg .ogg
  • ブラウザのバージョンにより、対応状況は異なる場合があります。
  • 上記の表は、音声形式に詳しくない人間（私）が書いています。内容については参考程度に留めておいてください。

代替コンテンツについて

audio要素の内容には、この要素に対応していないブラウザ向けの代替コンテンツを配置できます。

次の例では、audio要素に対応していない場合はobject要素を、それも対応していない場合はリンクが表示されるように指定しています。（代替コンテンツはsource要素よりも後に配置します）

<audio>

<source src="example.mp3">
<source src="example.m4a">
<source src="example.ogg">

<object data="example.mp3">
<param name="src" value="example.mp3">
<param name="autostart" value="false">
<a href="example.mp3">音声を聴く</a>
</object>

</audio>

preload属性について

preload属性は、先読みに関する情報をブラウザ側に伝えます。指定できる値は次の3つです。（ただし、必ずしも指定した通りの挙動になるとは限らないようです）

none
先読みを必要としていない（この音声は再生されるかどうか分からない、できるだけトラフィックを抑えたい）
metadata
音声のメタデータ（再生時間などの情報）だけは先読みしてほしい
auto
トラフィックは気にしないから音声全体を先読みしてほしい
<audio src="example.mp3" preload="auto"></audio>
  • preload属性に空文字（preload=""）を指定した場合は、auto を指定した時と同じ扱いになります。
  • この属性自体が指定されなかった場合は、先読みの挙動はブラウザ側に任されることになります。

mediagroup属性について

  • この属性は、HTML 5.1では廃止されました。

mediagroup属性は、その音声が属しているメディアグループの名前を指定します。複数のメディア要素（video要素とaudio要素）に同じ名前を付けることにより、それらを1つのグループとして連携させることが可能になるようです。（詳細未確認）

次の例では、musicというグループ名を指定しています。

<audio src="example.mp3" mediagroup="music"></audio>

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 5.1における変更点
  • mediagroup属性が廃止されました。

使用例


<audio preload="metadata" controls>

<source src="example.mp3" type="audio/mp3">
<source src="example.m4a" type="audio/aac">
<source src="example.ogg" type="audio/ogg">

<p>音声を再生することができませんでした。</p>

</audio>