Linuxなどのメモ書き

HTML5 audioタグ ブラウザ間の違い


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プロパティの動作確認結果

ブラウザ
動作
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プロパティ

作成中

再生中のファイルの切替

作成中




最終更新 2012/01/20 13:17:00 - kztomita
(2012/01/20 13:17:00 作成)


リンク

その他のWiki
Linuxメモ
Xnuメモ

会社
(有)ビットハイブ
受託開発やってます。

よくやる仕事

・Webシステム開発(LAMP環境)
・Linuxサーバー設定関連
サーバー移転作業代行

開発事例にデジタルカタログ/マンガビューワーを追加しました。

draggable.jsのスマホ対応版デモページを追加しました。説明はこちら

検索

Adsense
最近のコメント