HTML Audio を使う - メモ用紙

HTML5 でサポートされた audio 要素。ブラウザによって対応形式が異なるのでまだちょっと厄介。
まず結論から。クロスブラウザにするには次のように書く。MP3 または AAC、および Ogg Vorbis の2種類の音声ファイルが必要。

<audio controls>
	<source src="audio.mp3" type="audio/mpeg">
	<source src="audio.m4a" type="audio/mp4"> (AACを使う場合)
	<source src="audio.oga" type="audio/ogg">
	<a href="audio.mp3" rel="audio">この曲を再生</a>
</audio>

Mac で音声ファイルを Ogg Vorbis 形式に変換するには ffmpeg2theora が使える。

ffmpeg2theora

こうする理由。
まず実用を考えると音声は圧縮形式を選びたい。都合のいいことに audio 要素をサポートしているブラウザは、MP3 (またはAAC) か Ogg のどちらかを再生できる。対応するブラウザは次の通り。

MP3/AAC: Safari, Chrome
Ogg Vorbis: Firefox, Opera

これらを source 要素を使って指定する。type 属性には MIME Type を忘れずに指定する。指定しないと音声が再生されない。
最後に audio 要素をサポートしないブラウザのために、音声ファイルへのリンクを記述しておく。この部分をスクリプトで Flash のプレーヤーに置き換えるのもいい。HTML Audio が使えるかどうかは次のように判別できる。

var audio = document.createElement("audio");
var audioSupport = !!(audio.canPlayType);

ここで audio.canPlayType は音声形式を再生できるか判別するメソッドで、次のように使う。

audio.canPlayType("audio/mpeg"); // returns "", "maybe", or "probably"

戻り値が "maybe" なら再生できる。たぶんね。

参考