HTML

audio 要素

　audio要素は HTML5で新たに導入された要素で、注目度が高い機能の 1つでしょう。これまでウェブ・ページにオーディオを組み込みたい場合は、Flashなどのプラグインが使われてきました。しかし、HTML5では、プラグインなしに、オーディオをウェブ・ページに組み込むことができるのです。

audio要素の概要

カテゴリー

フロー・コンテンツ

フレージング・コンテンツ

エンベデッド・コンテンツ

controls属性が存在する場合：インタラクティブ・コンテンツ

コンテンツ･モデル

src属性が存在する場合：トランスペアレント。ただし、この要素の中に別の video要素や audio要素を入れてはいけません。

src属性が存在しない場合：1つ以上の source要素。ただし、この要素の中に別の video要素や audio要素を入れてはいけません。

利用可能な場所

エンベデッッド・コンテンツが期待される場所

タグの省略

不可。開始と終了タグの両方が必要。

要素固有の属性

src

オーディオ・ファイルのアドレスを指定します。

autobuffer

ユーザーによってオーディオが最後まで再生される可能性が高いことをユーザーエージェントに伝える論理属性です。

autoplay

オーディオが利用可能になったらすぐに再生を開始することを指示する論理属性です。

loop

オーディオの再生が終了したら最初に戻って再生を続けることを指示する論理属性です。

controls

オーディオの再生や停止などのユーザー・インターフェイスを表示させることを指示する論理属性です。

標準的なスタイル

-

audio要素の簡単な使い方

　では、まず最初に、audio要素の使い方を簡単に見て行きましょう。audio要素で再生させたいオーディオ・ファイルの URLを、src属性に指定します。これだけで、オーディオの準備が完了です。

　とはいえ、src属性だけではオーディオを再生することができません。再生ボタンも停止ボタンもないからです。ユーザーに対してオーディオを制御するためのインターフェースを表示させるためには、controls属性を使います。この属性は論理属性です。このコンテンツ属性をセットしておかないと、JavaScriptなしには、オーディオを再生できませんので、注意してください。

<audio src="mscs/Tchaikovsky-Symphony-No6-1st-2013.mp3" controls="controls">
<p>ご利用のブラウザでは再生出来ません。<a href="mscs/Tchaikovsky-Symphony-No6-1st-2013.mp3" title="チャイコフスキー：交響曲第6番 ロ短調 Op.74 《悲愴》 第1楽章">こちら</a>からダウンロードして下さい。</p>
</audio>

　src属性を使って mp3形式のオーディオ・ファイルを指定し、controls属性をセットしています。

　ここで、audio要素の中に p要素を入れている点に注目してください。これは、audio要素に対応していないブラウザに対して表示させたいコンテンツをマークアップしたものです。現状では audio要素に対応していないブラウザがありますので、何かしらのコンテンツを入れておくのが良いでしょう。この例では、オーディオ・ファイルをダウンロードできるよう、a要素を使ってオーディオ・ファイルへのハイパーリンクを用意しています。

　なお、この仕組みは、audio要素に対応しているものの、オーディオ・ファイルを読み取れなかったり、オーディオ・ファイルの形式をサポートしていないなどの理由で、オーディオが再生されなかった場合のフォールバック・コンテンツとしては機能しません。あくまでも、audio要素を全くサポートしていないブラウザ向けのコンテンツとなることに留意してください。

　再生や停止や音量変更やタイムラインなどが表示されますが、ブラウザによってそのインタフェースは異なります。

　audio要素には、controls属性や src属性の他、オート・バッファを行う autobuffer属性、自動再生を行う autoplay属性、ループ再生を行う loop属性が規定されています。これらのコンテンツ属性の使い方は video要素と同じです。

　また、source要素を使って、複数のオーディオ・ファイルを指定することができます。これについても video要素と同じです。

　さらに、オーディオ再生を JavaScriptから制御することが可能ですが、映像がない点だけを除いて、video要素と同じです。

　詳細については、「video 要素」のページを御覧ください。

ブラウザがサポートするオーディオ形式

　2009年12月現在で、audio要素に対応しているブラウザは、Firefox、Safari、Chrome です。それぞれのブラウザがサポートする代表的なオーディオ形式は以下のとおりです。