このウェブサイトはご利用の端末での閲覧に対応していません。
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”要素を使用して指定します。

controls”属性を指定すると音声ファイルの再生や停止、音量などをユーザーがコントロールできるインタフェースを表示します。表示されるインタフェースのデザインはブラウザによって異なります。

Google ChromeとInternet Explorerのインターフェース

サンプルコード

<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="" メディアのグループ化 メディアグループ名 メディアグループ名

要素の内容

audio”要素で埋め込む映像コンテンツを指定する方法は“src”属性で“audio”要素に直接指定する方法と“audio”要素の子要素となるsource”要素で指定する方法の2通りがあります。“audio”要素内に含まれるsource”要素track”要素以外の内容はブラウザが“audio”要素に対応していない場合に表示されます。

src”属性を指定する場合

audio”要素の内容は

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

の順に記述。

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

audio”要素の内容は

  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>
定義なし

定義あり

定義あり

定義あり

定義あり
DOMインターフェース
[Exposed=Window]
LegacyFactoryFunction=audio(optional DOMString src)]
interface HTMLAudioElement : HTMLElement {
[HTMLConstructor] constructor();
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

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