Rev.6を表示中。最新版はこちら。

概要

HTML5で使えるaudioタグをJavaScriptから扱う場合の、ブラウザ間での動作の違いのまとめ。とりあえず、autoplay,loopプロパティについて。

JavaScriptから使う

JavaScriptからaudio機能を使うには、以下のようにする。

JavaScriptからaudio機能を使う単純な例

try {
var audio = new Audio;
  audio.autoplay = true;
  audio.loop     = true;
  audio.src = "test.mp3";       // FireFoxはmp3は再生できないのでwavファイル等を使用
  audio.load();
  audio.play();
} catch(e) {
  alert(e);
}

で、audioタグをサポートしているブラウザがみんな同じ動作をしてくれるとよいのだが、そんなはずもなく。。。

loopプロパティ

loopプロパティをtrueにしておくと、ファイルの再生が完了すると自動的に最初から再生しなおしてくれる。

loopプロパティの動作結果結果は以下のとおり。

表1 loopプロパティの動作確認結果

ブラウザ	動作
IE9	◯
FireFox(3.6, 8で確認)	×
Safari5.1	◯
Chrome16	◯
iPhone(iOS4)	×
Android2.3.6(*1)	◯

(*1) Galaxy SII LTE

FireFoxとiPhoneでは、loop=trueにしても1回しか再生されない。再生完了時に"ended"イベントが発生するので、このイベントを使って再度、再生を行うようにして対応するしかなさそう。

autoplayプロパティ

autoplayプロパティをtrueにしておくと、ファイル読み込み完了後にplay()を呼び出さなくても自動で再生を開始する。

autoplayプロパティの動作確認結果は以下のとおり。

表2 autoplayプロパティの動作確認結果

ブラウザ	動作
IE9	src設定後
FireFox8	src設定後
FireFox3.6	load()後
Safari5.1	src設定後
Chrome16	src設定後
iPhone(iOS4)	load()後
Android2.3.6	load()後

基本的にどのブラウザでも、autoplayは機能した。ただし、ファイルの読み込み開始契機が異なるようで、自動再生が開始されるタイミングがブラウザごとに異なった。

IE9,FireFox8,Safari5.1,Chrome16では、srcプロパティを設定すると、直ぐにファイルの読み込みが始まり読み込み完了後、自動で再生が開始した。

一方、FireFox3.6,iPhone(iOS4),Android2.3.6では、srcプロパティを設定しただけではファイルは読み込まれず、明示的にload()を呼び出す必要があった(*1)。これらのブラウザではload()でファイルの読み込み完了後、自動で再生が開始した。

多くのブラウザに対応するためにはload()はさぼらないようにした方がよさそう。

(*1) autoplay = falseで手動再生時にもload()が必須かというとそうでもなく、src設定 -> play()とload()を省略しても再生は開始できた。srcさえ設定しておけば、play()の中で自動でload()も行ってくれる模様。ただ、load()は必ず行うようにしておいた方が無難そう。

volumeプロパティ

volumeプロパティで音量を調整できる。0.0〜1.0の値をとる。

表3 volumeプロパティの動作確認結果

ブラウザ	動作
IE9	◯
FireFox8	◯
FireFox3.6	◯
Safari5.1	◯
Chrome16	◯
iPhone(iOS4)	×
Android2.3.6	×

volume = 0.0, 0.5, 1.0で試してみたが、iPhone、Androidでは音量が変わらなかった。

ミュートするmutedプロパティもあるのだが、こちらもiPhone、Androidでは動作せず。

再生中のファイルの切替

autoplay = trueの設定で、再生中のファイルを変更する場合は、srcプロパティを変更すれば切り替わる。特にpause()等の呼び出しなどは必要なかった。

ただし、FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。表2の結果にもあるとおり、読み込みには明示的にload()をしなければならないということなのだろう。iPhoneはなぜかload()が不要だったが。