<audio>タグでは、音声などのオーディオを再生することができます。
使い方はsrc属性で、音声ファイルのurlを指定するか、src属性を使用せず、audio要素内にsource要素を配置し、音声ファイルのurlを複数指定する方法などがあります。 またブラウザごとに対応している音声ファイルのフォーマットが異なりますので、source要素を利用し、各webブラウザごとに音声ファイルを用意したほうがいいでしょう。
ブラウザごとに再生できる音声の形式は次のようになってます。
| 対応ブラウザ | MP3(audio/mp3) | Ogg(audio/ogg) | AAC(audio/aac) | |
|---|---|---|---|---|
| Internet Explorer9 | ○ | × | × | |
| Firefox7 | × | ○ | × | |
| Google Chrome14 | ○ | ○ | ○ | |
| Safari5.1 | ○ | × | ○ | |
| Opera11.5 | × | ○ | × | |
上記の()内は各形式のMIMEタイプとなります。
なおaudio要素に対応していないブラウザ向けに<audio>~</audio>内に代替コンテンツを入れる事ができます。 source要素を使用する場合は、それよりも後に代替コンテンツを配置します。 audio要素に対応したブラウザでは、代替コンテンツは表示されません。
HTML5での変更点
audio要素は、HTML5から追加されました。
HTML5.1の場合は、mediagroup属性が廃止されています。
書式
- <audio 属性="値">～</audio> ……… 音声を再生する
属性
| src="url" | 音声ファイルのurlを指定 | |||
|---|---|---|---|---|
| preload="" | 音声の読み込み方法を指定。
|
|||
| autoplay | 音声を自動再生する | |||
| mediagroup="" | 複数のメディア要素を連携する。複数の音声を一つにまとめる際に、そのグループ名を指定。 | |||
| loop | 繰り返し再生する | |||
| muted | 音声を出さずに再生する | |||
| controls | 再生ボタンや停止ボタンなどの再生コントローラーを表示する。コントローラーのデザインはブラウザにより異なる | |||
| crossorigin="" | 他サイトのリソースを利用する際の認証情報の扱い
|
|||
使用した時の例
<audio controls> <source src="sample.mp3" type="audio/mp3"> <source src="sample.ogg" type="audio/ogg"> <source src="sample.m4a" type="audio/aac"> <p>このブラウザでは音声を再生できません。</p> </audio>
対応ブラウザなどのデータ
| 形式 | <audio>～</audio> | カテゴリ | フローコンテンツ,フレージングコンテンツ,エンベデッドコンテンツ,インタラクティブコンテンツ(controls属性がある場合), パルパブルコンテンツ(controls属性がある場合) |
|---|---|---|---|
| 親要素 | エンベデッドコンテンツが期待される場所 | 子要素 | 0個以上のtrack要素、トランスペアレント(src属性がある場合、ない場合はsource要素) |
| 開始タグ | 必須 | 終了タグ | 必須 |
| グローバル属性 | accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate | ||
| 対応ブラウザ | Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~ | ||