概要
HTML <audio> 要素は、ドキュメント内に音声コンテンツを埋め込むために使用します。この要素は、複数の音声ソースを含むことができます。音声ソースは src 属性または <source> 要素を使用して表し、ブラウザはもっとも適切なソースを選択します。
<audio> 要素をサポートしないブラウザ向けのコンテンツも追加できます。
Web Audio API を用いて JavaScript コードから直接、音声を生成 / 操作することが可能です。詳しくは Web Audio API をご覧ください。
使用可能な場所
| コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ。controls 属性を持つ場合は、インタラクティブコンテンツとパルパブルコンテンツ。 |
|---|---|
| 許可された内容 | 要素が src 属性を持つ場合: 0 個以上の <track> 要素とそれに続く、メディア要素を含まないトランスパレントコンテンツ。すなわち <audio> 要素や <video> を子要素として配置してはなりません。その他の場合: 0 個以上の <source> 要素、0 個以上の <track> 要素、メディア要素を含まないトランスパレントコンテンツ。すなわち <audio> 要素や <video> を子要素として配置してはなりません。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
| DOM インターフェイス | HTMLAudioElement |
属性
この要素はグローバル属性を持ちます。
autoplay- 論理属性。指定された場合 (たとえ false であっても！) データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
autobuffer廃止 Gecko 2.0- 論理属性。これが指定された場合、自動再生がオフにされている場合にも音声が (先読みのために) ダウンロードされます。これはメディアキャッシュ容量が上限に達するか、音声ファイルがすべてダウンロードされるまで継続されます。この属性は、ユーザが音声の再生を選択すると考えられる場合にのみ使用してください。例えば、ユーザを "この音声を再生する" リンクを使用するページへ移動した場合です。
preload属性が選ばれたため、この属性は Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) で削除しました。 buffered- メディアがどれだけの時間分バッファリングされたかを判断するために、読み取ることが可能な属性です。この属性は
TimeRangesオブジェクトを持ちます。 controls- この属性を指定した場合、ブラウザは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。
loop- 論理属性。指定した場合は、音声コンテンツの終端に達すると自動的に先頭位置に戻ります。
mozCurrentSampleOffset- 音声ストリームの先頭から現在再生している位置までの、サンプル数を示したオフセットです。
muted- 音声を初期状態でミュートしておくかどうかを指定する論理属性。既定値は false で、これはミュート状態にしないでおくことを意味します。
played- 音声の再生済みの範囲のすべてを示す
TimeRangesオブジェクト。 preload- この列挙属性は、最良のユーザエクスペリエンスに関する作者の考えについて、ブラウザにヒントを与えるものです。以下の値のうちひとつを持つことができます:
none: ユーザはその音声を調べる必要がないであろうと作者は考えているか、サーバがトラフィックを最小化したいことを示します。言い換えると、これは音声をキャッシュすべきではないことを示します。metadata: ユーザはその音声を調べる必要がないが、メタデータ (例えば長さ) の取得は合理的であると作者が考えていることを示します。auto: ユーザは優先権が必要であることを示します。言い換えると、ユーザが音声を使用すると予測されない場合でも、必要であれば音声全体をダウンロードしてよいということを示します。- 空文字列: これは
auto値と同義です。
この属性を設定しない場合の既定値はブラウザが定義します (つまり、ブラウザが自身の既定値を選択できます) が、仕様書では
metadataに設定するであろうと助言しています。使用上の注意:autoplay属性はこの属性より優先します。これは、音声を自動的に再生したい場合は明らかにブラウザが音声をダウンロードしなければならないためです。仕様書ではautoplay属性とpreload属性を両方とも指定することを認めています。- ブラウザは、この属性の値に従うことを仕様書によって強制されていません。これは単なるヒントです。
src- 埋め込む音声コンテンツの URL を指定します。なお、この属性は HTTP access controls に従います。この属性を省略し、audio 要素の子要素として配置した
<source>要素とその src 属性を用いて指定することも可能であり、その場合、これを複数設置することで、異なるタイプの複数の代替コンテンツを配置することが可能となります。 volume- 音声部分の再生音量を、0.0 (最小) から 1.0 (最大) の範囲で表します。
先頭からの経過時間 (秒) は浮動小数点型 (float) で指定されます。
注記: 先頭からの経過時間については、まだ HTML5 での定義が完了していないため、今後仕様が変更されるおそれがあります。
イベント
audio 要素では、さまざまなイベントが発生します。
例
基本的な使用法
<!-- シンプルな音声再生 --> <audio src="https://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> あなたのブラウザは <code>audio</code> 要素をサポートしていません。 </audio> <!-- 字幕つきの音声再生 --> <audio src="foo.ogg"> <track kind="captions" src="foo.en.vtt" srclang="en" label="English"> <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska"> </audio>
source 要素を伴う audio 要素
<audio controls="controls"> あなたのブラウザは <code>audio</code> 要素をサポートしていません。 <source src="foo.wav" type="audio/wav"> </audio>
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard <audio> の定義 |
現行の標準 | |
| HTML5 <audio> の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 3.0 | 3.5 (1.9.1) [1] | 9.0 | 10.5 | 3.1 |
autoplay 属性 |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
buffered 属性 |
? | 4.0 (2.0) | ? | ? | ? |
controls 属性 |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
loop 属性 |
3.0 | 11.0 (11.0) | 9.0 | 10.5 | 3.1 |
muted 属性 |
? | 11.0 (11.0) | ? | ? | ? |
played プロパティ |
? | 15.0 (15.0) | ? | ? | ? |
preload 属性 |
3.0 | 4.0 (2.0) | 9.0 | (有) [2] | 3.1 |
src 属性 |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
| volume 属性 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | 1.0 (1.0) [1] | ? | ? | ? |
autoplay 属性 |
? | 1.0 (1.0) | ? | ? | ? |
buffered 属性 |
? | 4.0 (2.0) | ? | ? | ? |
controls 属性 |
? | 1.0 (1.0) | ? | ? | ? |
loop 属性 |
? | 11.0 (11.0) | ? | ? | ? |
muted 属性 |
? | 11.0 (11.0) | ? | ? | ? |
played プロパティ |
? | 15.0 (15.0) | ? | ? | ? |
preload 属性 |
? | 4.0 (2.0) | ? | ? | ? |
src 属性 |
? | 1.0 (1.0) | ? | ? | ? |
| volume 属性 |
[1] Gecko で音声を再生するには、サーバから正しい MIME type でファイルが提供される必要があります。
[2] 古い名称である autobuffer をサポートしています。