The Wayback Machine - https://web.archive.org/web/20170813170953/https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio

MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

audio 要素

HTML <audio> 要素は、ドキュメント内に音声コンテンツを埋め込むために使用します。この要素は、1 つ以上の音声ソースを含むことができます。音声ソースは src 属性または <source> 要素を使用して表し、ブラウザーはもっとも適切なソースを選択します。また、MediaStream を使用してストリーミングメディアを指し示すこともできます。

コンテンツカテゴリー フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ。controls 属性を持つ場合は、インタラクティブコンテンツとパルパブルコンテンツ。
許可された内容 要素が src 属性を持つ場合: 0 個以上の <track> 要素とそれに続く、メディア要素を含まないトランスパレントコンテンツ。すなわち <audio> 要素や <video> を子要素として配置してはなりません。
その他の場合: 0 個以上の <source> 要素、0 個以上の <track> 要素、メディア要素を含まないトランスパレントコンテンツ。すなわち <audio> 要素や <video> を子要素として配置してはなりません。
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 埋め込みコンテンツを受け入れるすべての要素。
許可された ARIA ロール application
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 属性は preload より優先します。autoplay を指定すると、言うまでもなくブラウザーは音声を再生するためにダウンロードを始めなければなりません。
  • ブラウザーは、この属性の値に従うことを仕様書によって強制されていません。これは単なるヒントです。
src
埋め込む音声コンテンツの URL を指定します。なお、この属性は HTTP access controls に従います。この属性を省略し、audio 要素の子要素として配置した <source> 要素とその src 属性を用いて指定することも可能であり、その場合、これを複数設置することで、異なるタイプの複数の代替コンテンツを配置することが可能となります。
volume
再生音量を、0.0 (最小) から 1.0 (最大) の範囲で表します。

先頭からの経過時間 (秒) は浮動小数点型 (float) で指定されます。

注記: 先頭からの経過時間については、まだ HTML5 での定義が完了していないため、今後仕様が変更されるおそれがあります。

イベント

audio 要素では、さまざまなイベントが発生します。

使用上の注意

基本

開始タグと終了タグの間 (<audio></audio>) に、<audio> 要素をサポートしないブラウザー向けのフォールバックコンテンツを追加できます。

controls 属性を使用して、ごく基本的な再生機能を提供できます (後述の例を参照)。より高度な使用方法として、HTML Media API を使用して音声の再生や制御が可能です。また、より具体的な機能を HTMLAudioElement インターフェイスで定義しています。

Audio streams/Web Audio API

Web Audio API を用いて JavaScript コードから直接、音声を生成 / 操作することが可能です。詳しくは Web Audio API をご覧ください。

<audio> と字幕

HTML5 の <video> は <track> 要素を使用して字幕を含めることができます (HTML5 videoにキャプションと字幕をつける方法 をご覧ください) が、<audio> 要素ではできません。<audio></audio> タグ内の <track> 要素は無視されます。役に立つ情報や回避策として、Ian Devlin による WebVTT and Audio をご覧ください。

例

基本的な使用法

<!-- シンプルな音声再生 -->
<audio
  src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
  autoplay>
  あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
</audio>

<source> 要素を伴う <audio> 要素

<audio controls="controls">
  あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
  <source src="foo.wav" type="audio/wav">
</audio>

仕様

仕様書 策定状況 コメント
HTML Living Standard
<audio> の定義		 現行の標準  
HTML5
<audio> の定義		 勧告  

ブラウザー実装状況

機能 Chrome Edge 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 プロパティ 49 14 15.0 (15.0) 11 46 9.1
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 Edge 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 をサポートしています。

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, ethertank, Potappo, RobinEgg
 最終更新者: yyss,