May 14th,2016
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ、エンベディッド・コンテンツ |
| “controls”属性を持つ場合、インタラクティブ・コンテンツ、パルパブル・コンテンツ | |
| 利用場所 | エンベディッド・コンテンツが置ける場所 |
| 内容 | 本文参照 |
| タグの省略 | 不可 |
“audio”要素は文書に音楽や音声などのオーディオ・コンテンツを埋め込む要素です。
HTML5で新しく追加された要素で、今までは音声ファイルを文書に埋め込むにはFlashなどのプラグインが必要でしたが、対応しているブラウザではプラグインなしで埋め込まれた音声コンテンツを再生することができるようになりました。
音声ファイルは“src”属性を使用して直接指定するか“source”要素を使用して指定します。
“controls”属性を指定すると音声ファイルの再生や停止、音量などをユーザーがコントロールできるインタフェースを表示します。表示されるインタフェースのデザインはブラウザによって異なります。
サンプルコード
<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”要素の内容は
- 0個以上の“track”要素
- トランスペアレント・コンテンツ・モデル(ただし“video”要素、“audio”要素を内容に含むことはできません)
の順に記述。
“src”属性を指定しない場合
“audio”要素の内容は
- 0個以上の“source”要素
- 0個以上の“track”要素
- トランスペアレント・コンテンツ・モデル(ただし“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でも定義されています。
定義されている仕様書
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| <audio> |   |
  |
|
|
|
DOMインターフェース
[Exposed=Window]
LegacyFactoryFunction=audio(optional DOMString src)]
interface HTMLAudioElement : HTMLElement {
[HTMLConstructor] constructor();
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
/* なし */
