音声ファイルを埋め込む

audio

< audio 【 オーディオ 】 属性="属性値">〜</audio >

audio要素は、文書内に音声ファイルを埋め込みます。HTML5で新たに加えられた要素で、プラグインを必要とせず、ブラウザーの基本機能のみで音声の再生を可能にします。また、audio要素の内容は、audio要素に対応していない環境への代替コンテンツになります。

カテゴリー ・インタラクティブコンテンツ（controls属性を持つ場合）
・エンベッディッドコンテンツ
・パルパブルコンテンツ（controls属性を持つ場合）
・フレージングコンテンツ
・フローコンテンツ
コンテンツモデル トランスペアレントコンテンツ
・src属性を持つ場合は、0個以上のtrack要素に続きトランスペアレントコンテンツ。
・src属性を持たない場合は、0個以上のsource要素、0個以上のtrack要素に続きトランスペアレントコンテンツ。つまり、audio要素の開始・終了タグ、およびsource要素、track要素を削除した場合でも、コンテンツモデル的に妥当となる内容であれば内包可。
ただし、子孫要素に他のaudio要素や、video要素を含むことは不可。
使用できる文脈 エンベッディッドコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

autoplay 【オート・プレイ 】

読み込んだファイルを自動的に再生します。autoplay属性は論理属性です。

controls 【コントロールズ】

音声ファイルの再生をコントロールするインターフェースを表示させます。この表示はブラウザーに依存します。controls属性は論理属性です。

crossorigin 【クロス・オリジン 】

CORS（Cross-Origin Resource Sharing／クロスドメイン通信）を設定する属性です。サードパーティーから読み込んだ音声を、canvas要素で利用できるようにします。以下の値を指定でき、値が空、もしくは不正な場合はanonymousが指定されたものとして扱われます。

anonymous CookieやクライアントサイドのSSL証明書、HTTP認証などのユーザー認証情報は不要です。
use-credentials ユーザー認証情報を求めます。

loop 【ループ 】

エンドレス再生を行うように指定します。loop属性は論理属性です。

mediagroup 【メディア・グループ 】

音声・動画ファイルのグループ名を指定します。同一文書内で、同じmediagroup属性値を持つaudio要素やvideo要素はグループとして扱われ、連続再生などが可能になります。

muted 【ミューテッド 】

ミュートした状態で再生します。muted属性は論理属性です。

preload 【プレ・ロード 】

再生するファイルを事前に読み込んでおくかを指定します。この属性の取り扱いはブラウザーによって異なり、指定した通りの挙動となるかはわかりません。なお、autoplay属性が同時に指定されている場合は、この属性の指定は無視されます。

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

src 【ソース 】

文書内に埋め込む音声ファイルのURLを指定します。

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

<audio src="sample.mp3" controls="controls">
  <p>
    <a href="sample.mp4" type="audio/mp3">ファイルのダウンロードはこちら（MP3/1.2MB）</a>
  </p>
</audio>

関連記事