この記事は翻訳作業中です。

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

The above example shows simple usage of the <audio> element. In a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.

The content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don't support the element.

Browsers don't all support the same audio formats; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands:

<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>

Other usage notes:

  • If you don't specify the controls attribute, the audio player won't include the browser's default controls; you can create your own custom controls using JavaScript and the HTMLMediaElement API.
  • To allow precise control over your audio content, HTMLMediaElements fire many different events.
  • You can also use the Web Audio API to directly generate and manipulate audio streams from JavaScript code.
  • <audio> elements can't have subtitles/captions associated with them in the same way that <video> elements can. See WebVTT and Audio by Ian Devlin for some useful information and workarounds.

A good general source of information on using HTML <video> is the Video and audio content beginner's tutorial.

属性

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

autoplay
論理属性。指定された場合、音声ファイル全体のダウンロードの完了を待たずに、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。
controls
この属性を指定した場合、ブラウザーは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。
crossorigin
This enumerated attribute indicates whether to use CORS to fetch the related image. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed values are:
anonymous
Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted.
use-credentials
Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.
When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.
loop
論理属性。指定した場合は、音声コンテンツの終端に達すると自動的に先頭位置に戻ります。
muted
音声を初期状態でミュートしておくかどうかを指定する論理属性。既定値は false です。
preload
この列挙属性は、最良のユーザーエクスペリエンスに関する作者の考えについて、ブラウザーにヒントを与えるものです。以下の値のうちひとつを持つことができます:
  • none: 音声を事前に読み込むべきではないことを示します。
  • metadata: 音声のメタデータ (例えば、長さ) を読み込みます。
  • auto: ユーザーが音声ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
  • 空文字列: これは auto 値と同義です。

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

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

使用上の注意

Styling with CSS

The <audio> element has no intrinsic visual output of its own unless the controls attribute is specified, in which case the browser's default controls are shown.

The default controls have a display value of inline by default, and it is often a good idea set the value to block to improve control over positioning and layout, unless you want it to sit within a text block or similar.

You can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, padding, margin, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.

To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the HTMLMediaElement API to wire up their functionality.

Video player styling basics provides some useful styling techniques — it is written in the context of <video>, but much of it is equally applicable to <audio>.

Detecting addition and removal of tracks

You can detect when tracks are added to and removed from an <audio> element using the addtrack and removetrack events. However, these events aren't sent directly to the <audio> element itself. Instead, they're sent to the track list object within the <audio> element's HTMLMediaElement that corresponds to the type of track that was added to the element:

HTMLMediaElement.audioTracks
An AudioTrackList containing all of the media element's audio tracks. You can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element.
HTMLMediaElement.videoTracks
Add an addtrack listener to this VideoTrackList object to be informed when video tracks are added to the element.
HTMLElement.textTracks
Add an addtrack event listener to this TextTrackList to be notified when new text tracks are added to the element.

Note: Even though it's an <audio> element, it still has video and text track lists, and can in fact be used to present video, although the use interface implications can be odd.

For example, to detect when audio tracks are added to or removed from an <audio> element, you can use code like this:

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

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

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

This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.

You can also use addEventListener() to listen for the addtrack and removetrack events.

基本的な使用法

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

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

<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 ?

凡例

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

関連情報