2011年9月25日(日) 15時54分35秒 [仕事]

HTML5のaudio要素を使って音を鳴らすサンプルと解説

HTML5のaudio要素を使えば、Flashなどのプラグインを使わなくても、ブラウザ単独の機能で音が鳴らせます。
そのaudio要素を使って、ウェブ上でユーザのアクションに合わせて効果音を出す方法を、All Aboutで公開しました。

■「HTML5のaudio要素で効果音を鳴らす」（＠All About ホームページ作成）

audio要素を使って音を鳴らす際、Firefox、Chrome、Safari、Operaの各最新版では、どれもWAVE形式の音声ファイルの再生が可能です。でも、IEはWAVE形式を再生できません……！
なんでなんだ。^^;
WAVE形式って、IEが一番再生できそうな形式なのに……。(^_^;;;

• IEはMP3を再生できる。
• FirefoxはOgg・WAVEを再生できる。
• ChromeはMP3・Ogg・WAVEを再生できる。
• SafariはMP3・WAVEを再生できる。
• OperaはOgg・WAVEを再生できる。

……5つのブラウザで共通して再生できる形式は……ない。orz

IEがWAVEの再生をサポートしていれば、代表的な5大ブラウザで共通して再生できる形式になったのになあ……。^^;
まあ、WAVE形式はファイルサイズが大きいので、ウェブ向きではないのは確かですが……。（でも、小さい効果音くらいならWAVEでも構わん気も。）

ところで、audio要素の中にsource要素を使って再生ファイルの選択肢を列挙したとき、1番目のsource要素に記述した音楽ファイルの形式が「そのブラウザでは再生不可能な形式」だった場合、たとえ2番目以降に再生可能な形式があっても、Windows版Safariでは再生してくれない気がするんですが。……気のせい？
たまたま試した環境に固有の問題があったのかな。

ソースの記述順によっては、Safariでの再生がちょっとうまくいきませんでした。（とりあえず、Safariが再生できるMP3を先頭のsource要素に記述しておくことで対処しておきましたが……。）