【JS】iPhoneのAudio周りのメモ

自分用にメモ 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() の有無は関係ない。