絶対に覚えておきたいHTML5の『audio要素』超基本を知る!!

audio要素について

audio要素はHTML5で新たに追加された新要素です。audio要素を使用することでFlashなどのプラグインを使用することなくオーディオ・プレイヤーをウェブ・ページに表示することができます。

audio要素の再生とブラウザ表示

audio要素をただ再生するにはsrc属性に再生する音楽ファイルを指定するだけです。1つの例としてsrc属性にMP3形式のファイルを指定しブラウザでの表示確認をしたいと思います。また、controls属性を指定することで再生ボタンなどのインターフェースを表示することができます。audio要素の主な属性については下表を参照ください。

属性 説明
src 再生したいオーディオファイルへのパスを指定します。
preload オーディオファイルの読み込みを制御します。
『’none’』・・・再生時まで読込まない。
『’metadata’』・・・メタ情報のみ先に読込む。
『’auto’』・・・先に読み読込む。
※これらの指定は完全に制御されるものではないようです。またautoplay属性が指定されているときは無視されます。
autoplay オーディオが再生可能になった場合に、自動で再生を行うかを指示する論理属性。
loop 再生が終了後に、再び最初から再生するかを指示する論理属性。
controls 再生や停止ボタンなどのユーザーインターフェースの表示を指示する論理属性。

ではブラウザでの表示を確認したいと思います。ここで確認したブラウザはcromeとFirefoxです。

【HTML】

<audio src="audio/sample.mp3" controls></audio>

ブラウザの表示確認

cromeではオーディオプレーヤーが表示されていますが、Firefoxではプレイヤーが上手く表示されていないのが確認できます。これはMP3形式にFirefoxが対応していないために起こってしまう現象です(※Firefoxがaudio要素に対応していないということではありません。)。このようにブラウザ毎にファイル形式が異なっているのが現状です。下記に代表的なオーディオ・ファイル形式を示しましたが、今後1つのファイル形式でどのブラウザでも再生されるようになってほしいと願わずにはいられません・・・

代表的なオーディオファイル

  • 『 AAC(.aac), MP3(.mp3), Vorbis(.ogg), WAVE(.wav) 』

source要素のを使用する

ブラウザ毎に対応しているファイル形式が異なっていることを確認することができました。このことから実際にaudio要素を使用する場合はブラウザ毎に対応するため複数のファイル指定をすることが必要になってきます。そこで複数の指定をするためにsource要素を使用します。

属性 説明
src オーディオファイルへのパスを指定します。
type オーディオファイルのMIMEタイプを指定します。
media オーディオのメディアタイプを指定します。

【HTML】

<audio controls>
   <source src="audio/sample.mp3" type="audio/mp3">
   <source src="audio/sample.ogg" type="audio/ogg">
   <source src="audio/sample.wav" type="audio/wav">
   <p>※ご利用のブラウザでは再生することができません。</p>
</audio>

source要素もHTML5からの新要素になります。使い方は上記のようにaudio要素の中に記述しsrc属性に再生するファイルを指定しすることでブラウザは上から順に再生可能かをチェックしていきます。尚、要素に対応していないブラウザでは全て無視され、その後ろに記述された要素が表示されるようになります。

ブラウザの表示確認

今回はFirefoxもちゃんとプレイヤーが表示されました。尚、audio要素の主な対応状況は下画像の通りです。

audio要素の対応状況

IE『6,7,8』では対応していないようなのですが、コリスさんの記事でIEなどのブラウザでaudio要素を再生するJSを紹介していたのでIEでもaudio要素を使いたい場合はこちらを試すのも1つの方法かもしれません。

『[JS]主要ブラウザ全てにaudio要素でMP3を再生できるようにするスクリプト -audio.js』

audio要素をJSで制御する

ここまでcotrols属性を指定することでブラウザが用意したaudio要素のインターフェースが表示され、再生・停止が行えることを確認しましたが、もし各ブラウザ共通のプレイヤーを表示したいと思った場合にはJavaScriptを用いて独自のプレイヤーを作成する必要があります。

今回は基本を学ぶことをテーマにしていますのでそこまではメモしていきませんが、JSを用いて再生と停止の制御を最後に確認してみたいと思います。

【HTML】

<audio id="audio" preload="auto">
   <source src="audio/sample.mp3" type="audio/mp3">
   <source src="audio/sample.ogg" type="audio/ogg">
   <source src="audio/sample.wav" type="audio/wav">
   <p>※ご利用のブラウザでは再生することができません。</p>
</audio>
<input type="button" onclick="audioPlay()" value="再生">
<input type="button" onclick="audioPause()" value="停止">

【JavaScript】

//再生開始
function audioPlay(){
	document.getElementById("audio").play();
}

//再生を停止
function audioPause(){
	document.getElementById("audio").pause();
}

上記のようにオーディオの再生・停止はdocument.getElementById(“ID”)を使いaudio要素のDOMを取得し『play()』メソッドで再生、停止には『pause()』メソッドを実行することで制御できます。

以上で今回の勉強メモは終了になりますが、audio・video要素などのメディア関連の新要素はJavaScriptを用いることでロード状況・再生位置などのより詳細な情報を取得し高度なプレイヤーを作ることができます。

次回audio要素をとり上げるときはもう少し難しいところをピックアップできればなと思っています。

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

Amazonへ

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事