- 2011-06-13 (月) 19:27
- JavaScript | SmartPhone
自分用にメモ iOS4.0 と 4.2 の端末で色々検証
var audio = new Audio('hoge.mp3');
まずはAudio オブジェクトを作る。 → HTMLAudioElement になってる
iPhone の場合、Audio オブジェクトを作った時点で発生するイベントは、loadstart のみ(iOS4.0/4.2共に) (HTML にベタで <audio> タグを書いた場合、emptied イベントも発生する?)
click/touchstart/touchend などのイベント発生後であれば、 下記スクリプトが動く(load系のイベントが発生する) 以下は上記イベントハンドラ内に記述されているものとする。
//audio.load(); audio.play();
audio.load() をしなくてもきちんと再生(iOS4.0/4.2共に)されるので、 audio.play() がロードの機能も持っている模様。
$(audio).bind('canplay', function(){console.log(1)}); audio.load();
audio に canplay イベントをバインドし、 再生可能な状態になったら audio.play() を実行する。 ここで、挙動に差が出る。
iOS4.2 : コンソールに’1′が表示される iOS4.0 : 反応無し
$(audio).bind('canplay', function(){console.log(1)}); audio.play();
ロードしかしていなかったところを、再生するように変えてみる。
iOS4.2 : コンソールに’1′が表示され、音声が再生される iOS4.0 : コンソールに’1′が表示され、音声が再生される
上記のことから、iOS4.2 以前の端末では、 audio.load() が機能していないように思われる。
console.log(audio.load);
とやっても undefined にはならないので、存在してないわけではなさそう・・・。
とりあえずやりたかったことは、 「再生ボタンをタップ後、audio の読み込みが完了するまでローディング画面を出し、 読み込み完了後別の処理を走らせつつ音声を再生する」 だったので、
audio = new Audio('hoge.mp3'); $(audio).bind('canplay', function(){ // ローディング画面を非表示 // ロード完了後の処理 });</p> <p>$('a.play').bind('click', function(){ // ローディング画面を表示 audio.play(); });
とすることで、ひとまずは解決。
ただこれだと、 「再生ボタンをタップ後、audio を読み込んでおき、任意のタイミングで再生する」 などといったことができなくなるので、どうしたもんか。
■追記 2011/6/13 20:54 —————————————————————————
//audio.load(); if(navigator.userAgent.indexOf('4_0') != -1){ setTimeout(function(){ $(audio).triggerHandler('canplay'); }, 100); }これだと、canplay にバインドさせた処理は実行されず、
audio.load(); if(navigator.userAgent.indexOf('4_0') != -1){ setTimeout(function(){ $(audio).triggerHandler('canplay'); }, 100); }これだと、canplay にバインドさせた処理が二重で実行される。
//audio.load(); if(navigator.userAgent.indexOf('4_0') != -1){ setTimeout(function(){ audio.play(); }, 100); }これだと、canplay にバインドさせた処理は実行されず、
audio.load(); if(navigator.userAgent.indexOf('4_0') != -1){ setTimeout(function(){ audio.play(); }, 100); }これだとsetTimeoutのディレイの後、canplay の処理と一緒に再生される。
//audio.load(); if(navigator.userAgent.indexOf('4_0') != -1){ $(audio).triggerHandler('canplay'); }これだと、canplay にバインドさせた処理が二重で実行される。
audio.load() の有無は関係ない。
Comments:0
Trackbacks:2
- Trackback URL for this entry
- http://unolabo.boo.jp/archives/2011/06/13-iphone%e3%81%aeaudio%e5%91%a8%e3%82%8a%e3%81%ae%e3%83%a1%e3%83%a2.html/trackback
- Listed below are links to weblogs that reference
- 【JS】iPhoneのAudio周りのメモ from うのらぼ。
- pingback from うのらぼ。 - 【JS】AndroidのAudio周りのメモ 11-06-20 (月) 19:24
-
[...] 今度はAndroid編。 (iPhone編はこっち) [...]
- pingback from うのらぼ。 - スマートフォンでの音声再生まとめ 11-08-31 (水) 22:29
-
[...] 【JS】iPhoneのAudio周りのメモ [...]