HTML入門 | HTML5マルチメディア | オーディオ(audio)要素

オーディオ(audio)要素

HTML5以前は、Webページでオーディオ(audio)を再生するための標準仕様がなかった。
そのため、オーディオを挿入するにはFlashのような外部プラグイン(plug-in)に頼る必要があった。
しかしHTML5では、<audio>タグを使ってWebページにオーディオを挿入する標準化された方法を提供している。

<audio>タグをサポートする主要Webブラウザのバージョンは次のとおりである。

オーディオ要素の属性

例

<audio controls>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    この文はユーザーのWebブラウザがaudio要素をサポートしていない場合に表示されます。
</audio>

controls属性は、再生、停止、音量調整など、オーディオの基本操作を制御できるパネルを生成する。

Webブラウザは、複数の<source>タグのうち上から順に最初に認識できるファイルタイプとアドレスを使用する。 <audio>タグの間にあるテキストは、そのWebブラウザが<audio>タグをサポートしていない場合だけ画面に表示される。

autoplay属性は、Webページがロード(load)されたときに音楽を自動再生するかどうかを設定する。

例

<audio controls autoplay>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    この文はユーザーのWebブラウザがaudio要素をサポートしていない場合に表示されます。
</audio>

loop属性を設定すると、オーディオの再生が終わっても継続して繰り返し再生される。

例

<audio controls loop>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    この文はユーザーのWebブラウザがaudio要素をサポートしていない場合に表示されます。
</audio>

HTML5オーディオファイル形式

HTML5標準が公式にサポートするオーディオファイル形式は、MP3、WAV、Oggのみである。

• MP3: Moving Picture Experts Groupによって開発され、MPEG-1のオーディオ規格として作られた非可逆圧縮ファイル形式である。
• WAV: IBMとMicrosoftによって開発され、個人用PCでオーディオを再生するためのIBMとMicrosoftの標準オーディオファイル形式である。
• Ogg: Xiph Foundationによって開発され、MP3の代替として作られた、特許で保護されていないオープンなマルチメディアファイル形式である。

HTML5オーディオファイル形式ごとの主要Webブラウザのサポート状況は次の表のとおりである。

HTML5 audio要素

HTML5 audio属性