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

上記の例は、 <audio> 要素の単純な使用方法を示しています。 <img> 要素と同様の方法で、埋め込みたいメディアへのパスを src 属性に設定します。他にも自動再生や繰り返しを行うかどうか、ブラウザーの既定のオーディオコントロールを表示したいかどうか、などの情報を指定する属性を含めることができます。

開始および終了 <audio></audio> タグの中のコンテンツは、この要素に対応してないブラウザーで代替として表示されます。

ブラウザーはすべてが同じ音声形式に対応しているわけではありません。内部に含められた <source> 要素で複数のソースを提供することができ、ブラウザーは理解できる最初のものを使用します。

<audio controls>
  <source src="myAudio.mp3" type="audio/mp3">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

他の使用上のメモ:

  • controls 属性を指定しない場合、音声プレイヤーはブラウザーの既定のコントロールを含めません。 JavaScript と HTMLMediaElement API を使用して、独自のカスタムコントロールを作成することができます。
  • 音声コンテンツを詳細に制御できるように、 HTMLMediaElement はさまざまな種類のイベントを発行します。
  • Web Audio API を使用して、 JavaScript コードから音声ストリームを直接生成および操作することができます。
  • <audio> 要素は <video> 要素と同じような方法で字幕を持つことができません。 Ian Devlin による WebVTT and Audio で、役立つ情報や作業があります。

HTML の <audio> 要素の使用に関する良い情報源として、映像および音声コンテンツの初心者向けチュートリアルがあります。

属性

この要素にはグローバル属性があります。

autoplay
論理属性。指定された場合、音声ファイル全体のダウンロードの完了を待たずに、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。
controls
この属性が指定された場合、ブラウザーは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。
crossorigin
この列挙型の属性は、関連画像を取得する際に CORS を使用するかを示します。CORS が有効なリソース は、汚染されることなく <canvas> 要素で再利用できます。次の値が使用できます:
anonymous
認証情報を伴わずにオリジン間要求を実行します。すなわち、Cookie や X.509 証明書がない Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダーの設定なし)、画像が汚染され、その使用も制限されます。
use-credentials
認証情報を伴ってオリジン間要求を実行します。すなわち、Cookie や X.509 証明書を伴う Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
この属性が提供されない場合、リソースは CORS 要求なしで取得され (Origin: HTTP ヘッダーを送信せずに取得)、<canvas> 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性 を参照してください。
loop
論理型の属性です。指定された場合、音声プレイヤーは音声の末尾に達すると、自動的に先頭に戻ります。
muted
論理型の属性で、音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false です。
preload
列挙型の属性で、ユーザーに取って最良の結果をもたらすと作者が考えていることのヒントをブラウザーに伝えるためのものです。以下の値のうちひとつを持つことができます。
  • none: 音声を事前に読み込むべきではないことを示します。
  • metadata: 音声のメタデータ (例えば、長さ) を読み込みます。
  • auto: ユーザーが音声ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
  • 空文字列: これは auto 値と同義です。

preload を設定しない場合の既定値はブラウザーが定義します (つまり、ブラウザーが独自の既定値を選択できます)。仕様書では metadata にするよう助言しています。

使用上のメモ:
  • autoplay 属性は preload より優先します。autoplay を指定すると、言うまでもなくブラウザーは音声を再生するためにダウンロードを始めなければなりません。
  • 仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。
src
埋め込む音声コンテンツの URL を指定します。なお、この属性は HTTP access controls に従います。この属性を省略し、audio 要素の子要素として配置した <source> 要素とその src 属性を用いて指定することも可能であり、その場合、これを複数設置することで、異なるタイプの複数の代替コンテンツを配置することが可能となります。

使用上のメモ

CSS でのスタイル付け

<audio> 要素は既定では固有の視覚的な出力を持ちませんが、 controls 属性が指定されると、ブラウザーの標準のコントロールが表示されます。

既定のコントロールは display の値に既定で inline を持っており、テキストブロックなどの中に置いておきたい場合でない限り、配置やレイアウトを制御しやすくするために、値を block に設定することは、多くの場合は良い考えです。

既定のコントロールは、ブロックを単位としてて影響するプロパティでスタイル付けすることができるので、 borderborder-radius, padding, margin 等を指定することができます。しかし、音声プレイヤー内の個別のコンポーネントはスタイル付けすることができず (例えば、ボタンの寸法やアイコンの変更、フォントの変更など)、またコントロールはブラウザーごとに異なります。

ブラウザー間で一貫したルック&フィールを実現するには、カスタムコントロールを作成する必要があるでしょう。これは好きな方法でマークアップおよびスタイル付けをすることができ、 JavaScript と HTMLMediaElement API を使用することで、これらの機能を結合することができます。

動画プレイヤーのスタイル付けの基本は、便利なスタイル付けテクニックをいくつか紹介しています。これは <video> の文脈で書かれたものですが、多くは <audio> にも同様に適用されます。

トラックの追加と削除の検出

addtrack および removetrack イベントを用いると、 <audio> 要素でトラックが追加されたり削除されたりしたことを検出することができます。しかし、これらのイベントは <audio> 要素自身に直接送信されるわけではありません。代わりに、 <audio>HTMLMediaElement 内にある、要素に追加されたトラックの種類に対応するトラックリストオブジェクトに送信されます。

HTMLMediaElement.audioTracks
メディア要素のオーディオトラックのすべてを含む AudioTrackList です。 addtrack のリスナーをこのオブジェクトに追加すると、新しいオーディオトラックが要素に追加された時に通知を受け取ることができます。
HTMLMediaElement.videoTracks
この VideoTrackList オブジェクトに addtrack リスナーを追加することで、要素に動画トラックが追加されたときに通知を受け取ることができます。
HTMLElement.textTracks
この TextTrackList オブジェクトに addtrack リスナーを追加することで、要素にテキストトラックが追加されたときに通知を受け取るkとができます。

メモ: <audio> 要素であっても、動画やテキストトラックリストを持っており、インターフェイスの実装の使用が奇妙に見えますが、実際に動画を表示するために使用することができます。

例えば、次のようなコードで <audio> 要素で音声トラックが追加されたり削除されたりしたときを検出することができます。

var elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = function(event) {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = function(event) {
  trackEditor.removeTrack(event.track);
};

このコードは音声トラックが要素で追加および削除されることを監視し、トラックエディターの論理関数を呼び出すことで、エディターにおける利用できるトラックの一覧でトラックを登録や削除を行います。

addtrack および removetrack イベントを監視するには、 addEventListener() を使用することもできます。

基本的な使用法

以下の例は <audio> 要素で OGG ファイルを再生する単純な例を示しています。 autoplay 属性によって自動再生され、代替コンテンツも含んでいます。

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

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

この例では、埋め込まれる音声トラックを、 <audio> 要素の直接の src 属性ではなく、内部の <source> 要素のものを使用して指定しています。これは type 属性の中でファイルの MIME タイプを含めることで、ブラウザーがそのファイルを再生できるかどうかを知ることができ、そのファイル再生できないときに時間を浪費しません。

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

複数の <source> 要素を持つ <audio>

ブラウザーは最初の source 要素 (Opus) を読み込もうとします。再生することができれば、2番目 (vorbis) と3番目 (mp3) の読み込みは行われません。

<audio controls="">
 <source src="foo.opus" type="audio/ogg; codecs=opus"/>
 <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="foo.mp3" type="audio/mpeg"/>
</audio>

アクセシビリティの考慮事項

台詞のある音声には、実際にコンテンツを説明する字幕と文字化情報 (transcript) を提供するべきです。字幕によって聴力を失った人が、音声の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、録音されたコンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で録音の内容を確認できるようになります。

自動字幕サービスが使用されている場合は、生成されたコンテンツが元の音声を正しく表現しているかを確認することが重要です。

字幕や文字化情報では、話されるセリフに加えて、重要な情報を伝える音楽や音響効果も識別できるようにしてください。これには感情や口調も含みます。

1
00:00:00 --> 00:00:45
[エネルギチックなテクノ音楽]

2 
00:00:46 --> 00:00:51
タイムキーパーのポッドキャストのようこそ!このエピソードでは、私たちはどちらのスイス時計が腕時計かを議論します?

16
00:00:52 --> 00:01:02
[笑い] ごめん!言いたかったのは、どの腕時計がスイスの腕時計か?です。

技術的概要

コンテンツカテゴリ フローコンテンツ記述コンテンツ埋め込みコンテンツcontrols 属性を持つ場合は、対話型コンテンツ知覚可能コンテンツ
許可されている内容 要素が src 属性を持つ場合: 0個以上の <track> 要素とそれに続く、メディア要素を含まない透過的コンテンツ。すなわち <audio> 要素や <video> を子要素として配置してはなりません。
その他の場合: 0個以上の <source> 要素、0個以上の <track> 要素、メディア要素を含まない透過的コンテンツ。すなわち <audio> 要素や <video> を子要素として配置してはなりません。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 埋め込みコンテンツを受け入れるすべての要素。
許可されている ARIA ロール application
DOM インターフェイス HTMLAudioElement

仕様書

仕様書 状態 備考
HTML Living Standard
<audio> の定義
現行の標準  
HTML5
<audio> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5
補足
完全対応 3.5
補足
補足 For Firefox to play audio, the server must serve the file using the correct MIME type.
IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 For Firefox to play audio, the server must serve the file using the correct MIME type.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
autoplayChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
bufferedChrome ? Edge 完全対応 ありFirefox 完全対応 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?
controlsChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
loopChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 11IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
mozcurrentsampleoffset
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 3.5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mutedChrome ? Edge 完全対応 ありFirefox 完全対応 11IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 14Opera Android ? Safari iOS ? Samsung Internet Android ?
playedChrome 完全対応 49Edge 完全対応 14Firefox 完全対応 15IE 完全対応 11Opera 完全対応 46Safari 完全対応 9.1WebView Android 完全対応 49Chrome Android 完全対応 49Edge Mobile 完全対応 14Firefox Android 完全対応 15Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
preloadChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 4
完全対応 4
未対応 3.5 — 4
代替名
代替名 非標準の名前 autobuffer を使用しています。
IE 完全対応 9Opera 完全対応 15
完全対応 15
未対応 10.5 — 15
代替名
代替名 非標準の名前 autobuffer を使用しています。
Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 15
完全対応 15
未対応 ? — 14
代替名
代替名 非標準の名前 autobuffer を使用しています。
Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
srcChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
volumeChrome ? Edge 完全対応 ありFirefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報