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

概要

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プロパティの動作結果結果は以下のとおり。

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

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

autoplayプロパティ

作成中

再生中のファイルの切替

作成中