<audio>音声を再生する

<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="" 音声の読み込み方法を指定。
  • none …… 先読みをしない
  • metadata …… サイズや長さなどのメタデータのみを先読みする
  • auto …… 音声全体を先読みする
autoplay 音声を自動再生する
mediagroup="" 複数のメディア要素を連携する。複数の音声を一つにまとめる際に、そのグループ名を指定。
loop 繰り返し再生する
muted 音声を出さずに再生する
controls 再生ボタンや停止ボタンなどの再生コントローラーを表示する。コントローラーのデザインはブラウザにより異なる
crossorigin="" 他サイトのリソースを利用する際の認証情報の扱い
  • anonymous …… 認証情報を利用しない
  • use-credentials …… 認証情報を利用する

使用した時の例

<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~

ゆう。