オーディオファイルは、HTML5でビデオと同様に簡単に埋め込むことができます。 HTML5では、そのためにaudioという独自の要素が用意されています。
<audio src="song.mp3"> ブラウザはこのaudio要素をサポートしていません。 </audio>
audio要素にはsrc属性を介して再生するファイルの名前が割り当てられます。ただし、ファイルはまだ再生されていません。そのためにはコントロール要素が必要です。
コントロール要素を表示するには、audio要素にcontrols属性を割り当てます。
<audio src="song.mp3" controls> ブラウザはこのaudio要素をサポートしていません。 </audio>
ブラウザ内では、次のように表示されるはずです:
controlsがない場合、audio要素は表示されません。自分でJavaScriptを使って独自のコントロール要素を追加する場合には、属性を省略することが有用です。audio要素の使用もまた問題があります。問題の原因はやはり、それぞれ異なるフォーマットをサポートしているブラウザです。次の表では、今現在の各ブラウザがどのフォーマットをサポートしているかを示しています。
| ブラウザ | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | いいえ | はい | はい | いいえ | いいえ |
Safari | はい | いいえ | はい | はい | はい |
Chrome | はい | はい | いいえ | いいえ | いいえ |
Opera | いいえ | はい | はい | はい | いいえ |
では、何をすればいいのでしょうか？audio要素では、さまざまなフォーマットを指定するための追加のsource要素を定義することができます。例:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>src属性には、異なる形式のファイルが割り当てられます。controls以外にも、audio要素には追加の属性があります。その1つがautoplayです。
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
この属性を設定すると、オーディオファイルが読み込まれると自動的に再生が開始されます。通常はこの属性を設定しないで、訪問者にオーディオファイルの再生タイミングを自由に選択させるべきです。
さらに興味深いのはloop属性です。この属性を設定すると、ファイルがループ再生されます。
ビデオの埋め込みと同様に、オーディオファイルにはtypeとmediaの2つの属性があります。ここでも、該当するMIMEタイプやコーデックを指定できます。HTML5仕様にはtype属性に対して次の典型的な設定がリストされています:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'source要素ではなく、audio要素でのみこれらの属性を使用できることに注意してください。
Flash & Co. の埋め込み
Flashファイルは、以前のHTMLバージョンではembedとobjectの組み合わせを使用して埋め込むことができました。その結果、非常に見栄えの悪い構文が生まれました。例えば、次のようになります:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>
これが、objectとembed要素を通じた古典的な方法で、非常に長い間HTMLで使用されてきた方法です。
しかし、「古典的」という言葉でここを表現することは、W3Cによって過去に承認された方法であったことを意味しません。なぜなら、HTML 4ではInternet Explorerによって正しく解釈されたobject要素が推奨された一方で、Netscape Navigatorはembed要素を使用しました。この異なる解釈のため、objectとembed要素の組み合わせが必要となりました。
HTML5では、アクティブコンテンツを埋め込むために公式にobjectとembedの2つの要素が用意されています。embedは、通常ブラウザプラグインが必要な非HTMLコンテンツの表示用のコンテナです。埋め込まれたコンテンツを表示するためには、通常ブラウザプラグインが必要です。
embedを使用すると、例えばFlash動画を標準準拠で埋め込むことができます。以下はその見本です。どのように見えるかの例です：
<embed
src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
type="application/x-shockwave-flash"
width="384"
height="313"
allowscriptaccess="always"
allowfullscreen="true"
/>embed要素にはさまざまな属性を割り当てることができます。最も重要なのはもちろんsrc属性です。なぜなら、そこで最終的に組み込むファイルを指定するからです。またtype属性ではMIMEタイプが指定されます。
Flashの場合はapplication/x-shockwave-flashとなります。一方、LaTeXファイルを組み込みたい場合はapplication/x-latexと記述します。組み込まれるファイルの幅と高さはwidthとheightで制御されます。
他にもHTML5には公式には属さない追加の属性があります。これらの属性により、使用されるプラグインを制御できます。前の例では、"Flash属性"のallowscriptaccessとallowfullscreenを使用して、スクリプトアクセスとフルスクリーンモードが可能であることが定義されています。同様に、Flash動画のクオリティを決定するquality属性もあります。
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>object要素
object要素は、内容のコンテナとしてembedと同様に機能します。ただし、embedとは異なり、objectには3つの異なる内容モデルがあります。ブラウザが直接表示可能な画像であると認識すると、img要素として扱います。参照されたオブジェクトがWebコンテンツである場合、その内容はiFrame内で表示されます。（iFrameについてはこのシリーズの後半で詳しく説明します）。他の内容の場合は、objectはembedと同様に動作します。
以下の例は、object要素を使用してFlash動画を組み込む方法を示しています。
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
width="400"
height="300">
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<p>
In Ihrem Browser ist kein Flash-Plug-in vorhanden.
</p>
</object>最後に、objectまたはembedを使用すべきかという問題があります。最初の見た目では、これら2つの要素はほぼ同じように見えます。実際、object要素はembed要素ができることはすべてできます。
コンテンツを組み込む場合（画像を除く）、通常はobject要素を使うべきです。なぜなら、この要素は、組み込まれた要素が読み込めない場合に表示される代替コンテンツを指定できるからです。
