audio 要素音声ファイルを埋め込む

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

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

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

さらに詳細な説明を見る

サンプルソースを見る

audio 要素の仕様

カテゴリ
  • インタラクティブ・コンテンツとなるのは controls 属性をもつ場合
  • パルパブル・コンテンツとなるのは controls 属性をもつ場合
コンテンツモデル
  • src 属性をもつ場合は、0個以上の track 要素に続きトランスペアレント
  • src 属性をもたない場合は、0個以上の source 要素、0個以上の track 要素に続きトランスペアレント

つまり、audio 要素の開始、終了タグ、及び source 要素、track 要素を削除した場合でも、コンテンツモデル的に妥当となる内容であれば内包できます。

ただし、子孫に他の audio 要素や、video 要素を含んではいけません。

この要素を使用できる文脈

エンベッディッド・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
[NamedConstructor=Audio(),
 NamedConstructor=Audio(DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {};

詳細説明

audio 要素に指定できる属性は下記の通りです。

属性 概要
src 属性 埋め込む動画ファイルの URI を指定します。
crossorigin 属性 CORS (Cross-Origin Resource Sharing / クロスドメイン通信) 設定属性です。サードパーティ (元の文書とは異なるオリジン) から読み込んだ音声ファイルに対するアクセスについて指定します。
preload 属性 音声ファイルを事前に読み込んでおくかを指定します。この取り扱いはブラウザによりますので、確実に指定した通りの挙動となるかはわかりません。なお、autoplay 属性が同時に指定されている場合は、この属性の指定は無視されます。
autoplay 属性 自動的に再生します。ただし、閲覧者の意思と関係なく再生される音声は迷惑なことが多いですので、使用には注意が必要です。
mediagroup 属性 要素のグループ名を指定します。同一文書内で、同じ mediagroup 属性値を持つ video 要素や audio 要素は、グループとして扱われ、連続再生などが可能になります。
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> 

W3C HTML5 仕様書

4.8.7 The audio element