HTML5における<audio>タグの使い方

HTML4以前では、webサイトで音声を再生するには、フラッシュプレイヤーを埋め込んだりする必要がありました。しかし、HTML5ではaudioタグを使うことで、フラッシュプレイヤーなどを利用せずに音声を再生することが可能です。サイト上で、音声を再生させたいと考えてる人にはとても魅力的ではないでしょうか?

今回は、HTML5における、audioタグの使い方をご紹介します。

HTML5におけるaudioタグの使い方

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

上記のコードを見てみると、src属性を使ってオーディオファイルを指定します。また、オーディオタグと、srcのファイル指定だけでは、サイト上に何も表示されないため、controls属性が必要になります。

表示例です。上記の記述をするだけで、このようにプレイヤーを表示させ、指定したファイルの再生を行うことができます。

screenshot 236

audioタグの属性

属性説明
src属性音声ファイルを指定する(複数指定が可能)
preload属性音声をあらかじめ読み込む(auto、metadata、none)
autoplay属性音声を自動再生する
loop属性 ループ再生を指定する
controls属性 インターフェースを表示する

まとめ

audioタグの基本的な使い方は以上です。いきなり音が出るとびっくりする人もいるので、その辺りは考慮して、ユーザーに配慮した音楽再生を心がけましょう。