audio 要素

audio 要素は、文書内に音声ファイルを埋め込みます。HTML 4.01 などでは、embed 要素や object 要素による音声ファイルの埋め込みは可能でしたが、ブラウザプラグインによる再生を前提としたものでした。

HTML Standard で新たに加えられた audio 要素は、プラグインを必要とせず、ブラウザの基本機能のみで音声の再生を可能にします。

※ 音声を再生するには、サーバから正しい MIME Type でファイルが提供される必要があり、場合によってはサーバ側での設定が必要になります。

audio 要素に指定できる属性は下記の通りです。より詳しい解説は各属性のページをご覧ください。

属性	概要
src 属性	埋め込む動画ファイルの URI を指定します。
crossorigin 属性	CORS （Cross-Origin Resource Sharing / クロスドメイン通信） 設定属性です。サードパーティ （元の文書とは異なるオリジン） から読み込んだ音声ファイルに対するアクセスについて指定します。
preload 属性	音声ファイルを事前に読み込んでおくかを指定します。この取り扱いはブラウザによりますので、確実に指定した通りの挙動となるかはわかりません。なお、autoplay 属性が同時に指定されている場合は、この属性の指定は無視されます。
autoplay 属性	自動的に再生します。ただし、閲覧者の意思と関係なく再生される音声は迷惑なことが多いですので、使用には注意が必要です。
loop 属性	再生が終わったらまた最初から再生を開始する、エンドレス再生を行うように求めます。
muted 属性	ミュートした状態で再生します。
controls 属性	音声ファイルの再生をコントロールするインタフェースを表示させます。この表示はブラウザに依存します。

preload 属性

preload 属性には下記の値が指定できます。

属性値	概要
none	音声が必ず再生されるとは限らない、または不必要なトラフィックを避けたいといった意思をブラウザに伝えます。不要な読み込みを避けられるかもしれません。
metadata	そのリソースのメタデータ（再生時間などの情報）だけは先に取得しておくことをブラウザに勧めます。
auto	サーバのトラフィックなどは気にせず、閲覧者のニーズを優先してリソース全体をダウンロード開始してよいということをブラウザに伝えます。属性値が空の場合はこの扱いとなります。

ブラウザのサポート状況と対応フォーマット

	Chrome	Firefox	Internet Explorer	Opera	Safari
audio 要素のサポート	3.0～	3.5～	9.0～	10.50～	3.1～
WAVE	○	○	×	×	○
WebM (Vorbis)	○	○ 4.0～	×	○ 10.60～	○ 要プラグイン
MP4 (AAC)	△ Chromium を除く	△ 要コーデック	○	×	○
Ogg (Vorbis)	○	○	×	○	○ 要プラグイン
Ogg (Opus)	○ 27.0～	○ 15.0～	×	×	×

<!-- src 属性によって読み込む例 -->
<audio src="/sample.mp4" controls="controls">
 <p>
  サンプルが視聴できます。ブラウザで再生できない場合は、下記からダウンロードしてご試聴ください。
  <a href="/sample.mp3" type="audio/mp3">ファイルのダウンロードはこちら（MP3 / 1.2MB）</a>
 </p>
</audio>

<!-- source 要素によって 3種類のフォーマットを用意した例 -->
<audio controls="controls">
 <source src="/sample.ogg" type="audio/ogg" />
 <source src="/sample.wav" type="audio/wave" />
 <source src="/sample.mp4" type="audio/mp4" />
 <p>
  サンプルが視聴できます。ブラウザで再生できない場合は、下記からダウンロードしてご試聴ください。
  <a href="/sample.mp3" type="audio/mp3">ファイルのダウンロードはこちら（MP3 / 1.2MB）</a>
 </p>
</audio>

<!-- track要素によってテキストトラックを提供した例 -->
<audio src="/seminar.mp4" controls="controls">
 <track kind="captions" src="seminar.ja.vtt" srclang="ja" label="日本語" />
 <track kind="subtitles" src="seminar.en.vtt" srclang="en" label="English" />
 <p>
  セミナーの音声が再生できます。ブラウザで再生できない場合は、下記からダウンロードしてご利用ください。
  <a href="/seminar.mp3" type="audio/mp3">ファイルのダウンロードはこちら（MP3 / 1.2MB）</a>
 </p>
</audio>

<!-- JavaScript によって、音声ファイルの再生やボリュームを操作する例 -->
<audio id="sample" src="sample.mp4"></audio>
<div>
 <button onclick="document.getElementById('sample').play()">再生</button>
 <button onclick="document.getElementById('sample').pause()">一時停止</button>
 <button onclick="document.getElementById('sample').volume+=0.1">ボリュームを上げる</button>
 <button onclick="document.getElementById('sample').volume-=0.1">ボリュームを下げる</button>
</div> 

IE11	○
Edge（EdgeHTML）	○
Edge（Chromium）	○
Chrome	○
Firefox	○
Safari	○
iOS Safari	○
Android Chrome	○