HTML5から登場の audio タグの使い方 ~ Puti Developers Blog

こんにちは。Pineです。
今朝、Flashを使った簡単なmp3プレーヤーの設置方法を紹介しましたが、
そんな方法よりももっと簡単に曲を設置できる新機能があったことを
すっかり忘れていました。

最近、IEも導入をはじめて、本格的な標準化がはじまっているHTML5
にあるaudioタグを用いる方法です！
これならスマートフォンでも、HTML5に対応していればWebで曲を
流すことができます。

詳細は以下から..........
OSやブラウザによっていろいろと再生できるものとできないものが
違ってくるみたいです。
以下、それをまとめた表です。

OS	ブラウザ	WAV	AIFF	MP3	OGG	AAC	FLAC	SHOUT cast
Windows (7/XP)	Firefox 3.6
	Chrome 7.0
	Safari 5.0
	IE9 beta
OS X (10.6.4)	Firefox 3.6
	Chorme 7.0
	Safari 5.0
iOS 3.2 (iPad)	Safari

※音楽方丈記様から転載

まあ、HTML5に対応してるならmp3など、メジャーなコーデックはほぼ
対応しているのでしょう。
一部対応してなくても、今後対応する見込みもありますしね。

＊＊　使い方　＊＊

プレーヤーを埋め込むときは、以下のように記述します。

<audio src="曲ファイルのアドレス" controls>

たった一行これだけです。
srcには曲のファイル名を指定します。
controlsは入れるだけで、プレーヤーコントロールを表示させる
という設定になります。

他の属性も含めて、使い方をリストにまとめた表が以下の表です。

属性	値	用途
src		再生する音声ファイルの URL
controls		再生/停止ボタンなどのインターフェイスを表示する
autoplay		ロード後に自動再生する
loop		ループ再生する
preload	none metadata auto	再生前にデータを読み込まない再生前に再生時間などのヘッダ情報を読み込んでもよい再生前にデータを全て読み込んでもよい

※音楽方丈記様から転載

値が指定されていない、controls、autoplay、loopは入れるだけで
その働きをなす属性です。
コントロールを表示させずに、ページが読み込まれたらすぐ再生させ、
繰り返し再生をさせるという仕組みにしたいときは、

<audio src="~.mp3" autoplay loop>

と指定します。

あと一つ大切なことを忘れていました！
このタグはもちろん</audio>タグで閉じるのですが、
<audio>〜</audio>には、対応してないときに表示させる内容を
記述します。

<audio src="~.mp3" autoplay loop>未対応です。</audio>
みたいな感じです。

プレーヤーコントロールの外観は、ブラウザによって異なります。

Chrome