HTML5 / Audio


Video同様ブラウザごとに違いがある模様。下記を参考にしながら試してみた。
ブラウザーのネイティブなオーディオ – html5doctor – HTML5.JP
ASCII.jp:HTML5 Audioで作るiTunes風音楽プレイヤー|古籏一浩のJavaScriptラボ

まずはファイルのサポート形式が違うので、Firefox, Opera 用に ogg、Safari 用に mp3 を用意します。Chrome は両方OK。
※試したバージョンは Chrome 12.0.742.122, Safari 5.1, Firefox 5.0.1, Opera 11.50

<audio> タグと <video> タグは src の指定を複数できるけど、これに未対応な(1個目しか読まない) Firefox を優先して下記のように記述。

1
2
3
4
5
<audio controls autobuffer>
    <source type="audio/ogg" src="audio.ogg" />
    <source type="audio/mpeg" src="audio.mp3" />
    <p>非対応です</p>
</audio>

controls で再生ボタンなどのインターフェイスが表示され、autobuffer でバッファしてくれます。他にも autoplay でOpera以外は自動再生、loop でFirefox以外はルーブ再生します。

それから、source は type を指定しとくと、ファイルを読み込む前に再生可能か判断してくれるそうです。指定しないと読み込んでから判断するみたいなので、やった方がイイよね。

controls 指定しないと画面に何も表示されんけどどうすんのと思うけど、ちゃんと JavaScript で制御できます。getElementById とかで取得して play() や stop() が使えます。
※例は jQuery で onload 時に再生

1
2
3
4
5
6
<script>
jQuery(function($){
    var audio = $('#audio')[0];
    audio.play();
});
</script>

他にも JavaScript で生成できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
try {
    var audio = new Audio('');
    if (audio.canPlayType('audio/ogg')) {
        audio.src = 'audio.ogg';
    } else if (audio.canPlayType('audio/mpeg')) {
        audio.src = 'audio.mp3';
    } else {
        throw '非対応です';
    }
    audio.play();
} catch(e) {
    alert('非対応です');
}

Opera が引数なしの new Audio() だとNGなので、Audio(”) のようにします。あとは、ブラウザの差異があるので canPlayType で再生できるか判断する必要があります。
音声ファイルが大きい時は Image() の時と同様に preload した方がイイみたい。

サンプル

音は下記サイトのものを使用しました。
音楽素材/魔王魂

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です