このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

audio要素:音声HTML5で追加

記事May 14th,2016
July 7th,2020
音声を埋め込む要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

audio”要素は文書に音楽や音声などのオーディオ・コンテンツを埋め込む要素です。

HTML5で新しく追加された要素で、今までは音声ファイルを文書に埋め込むにはFlashなどのプラグインが必要でしたが、対応しているブラウザではプラグインなしで埋め込まれた音声コンテンツを再生することができるようになりました。

音声ファイルはsrc”属性を使用して直接指定するかsource”要素を使用して指定します。

サンプルコード

<p><audio src="sample.mp3" controls>音声ファイルを再生できません</audio></p>

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
src="" 埋め込む音声ファイルの指定 URL 埋め込む音声ファイルのURL
crossorigin="" 音声ファイルを読み込む時のCORSリクエストを設定 anonymous CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
use-credentials CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
preload="" データの事前読み込みを指定 none 事前読み込みしない(データを再生する時まで読み込まない)
metadata ページを読み込む時にメタデータのみ読み込む
auto ページを読み込む時にデータの読み込みを開始しても良い
autoplay="" 自動的に再生する autoplay 自動的に再生する
loop="" 再生が終わったらまた最初から再生する loop 再生が終わったらまた最初から再生する
muted="" ミュートした状態を初期状態とする muted ミュートした状態を初期状態とする
controls="" 再生をコントロールするインタフェースを表示 controls 再生をコントロールするインタフェースを表示

autoplay”属性を指定した場合preload”属性は無視されます。

過去に定義された属性

属性
属性 説明 説明
mediagroup="" メディアのグループ化 メディアグループ名 メディアグループ名

要素の内容

src”属性を指定する場合

  1. 0個以上のtrack”要素
  2. トランスペアレント・コンテンツ・モデル(ただしvideo”要素、“audio”要素を内容に含むことはできません)

の順に記述。

src”属性を指定しない場合

  1. 0個以上のsource”要素
  2. 0個以上のtrack”要素
  3. トランスペアレント・コンテンツ・モデル(ただしvideo”要素、“audio”要素を内容に含むことはできません)

の順に記述。

source”要素を使用して音声ファイルを指定する

source”要素を使用して音声ファイルを指定する場合、複数のsource”要素を配置することで複数の再生候補を指定することができます。この場合ブラウザがもっとも適切な音声ファイルを選択して再生します。

ブラウザによって再生できる音声ファイルの形式が異なるので、異なる形式の音声ファイルを指定しておくことでそのブラウザが対応している形式のファイルが再生されるようにすることができます。

<p>
<audio controls>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.wav" type="audio/wav">
<source src="sample.ogg" type="audio/ogg">
音声ファイルを再生できません
</audio>
</p>

仕様書

audio”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<audio>
定義なし

定義あり

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
src=""
定義なし

定義あり

定義あり

定義あり

定義あり
crossorigin=""
定義なし

定義あり

定義あり

定義あり

定義あり
preload=""
定義なし

定義あり

定義あり

定義あり

定義あり
autoplay=""
定義なし

定義あり

定義あり

定義あり

定義あり
loop=""
定義なし

定義あり

定義あり

定義あり

定義あり
muted=""
定義なし

定義あり

定義あり

定義あり

定義あり
controls=""
定義なし

定義あり

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
mediagroup=""
定義なし

定義あり

削除

削除

削除
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク