audio 要素音声ファイルを埋め込む
audio 要素は、文書内に音声ファイルを埋め込みます。HTML 4.01 などでは、embed 要素や object 要素による音声ファイルの埋め込みは可能でしたが、ブラウザプラグインによる再生を前提としたものでした。
HTML5 で新たに加えられた audio 要素は、プラグインを必要とせず、ブラウザの基本機能のみで音声の再生を可能にします。
※ 音声を再生するには、サーバから正しい MIME Type でファイルが提供される必要があり、場合によってはサーバ側での設定が必要になります。
audio 要素の仕様
- カテゴリ
-
- インタラクティブ・コンテンツとなるのは controls 属性をもつ場合
- パルパブル・コンテンツとなるのは controls 属性をもつ場合
- コンテンツモデル
- この要素を使用できる文脈
エンベッディッド・コンテンツが期待される場所
- この要素で使用できる属性
詳細説明
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～ | × | × | × |
audio 要素のサンプルソース
<!-- 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 | ○ |