【JS】iOS4.1以下で、audioを制御できない【とみせかけて犯人はPHP】

■追記 2011/6/8 19:06 —————————————————————————- 解決しました。

実際の環境では、PHPでドキュメントルートの外からmp3のデータを引っ張ってきていたのですが、 そのコード上で、

header("Content-Type: audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3");

と、Content-Type を複数指定していました。 ここを、 “audio/mpeg” のみに(こっそり)直したところ、無事iOS4.0の端末でも再生されるようになりました。 まさかPHPの方が原因だったとは･･･。

結論

iOS4.0(恐らくiOS4.1以下)では、複数の Content-Type には非対応、iOS4.2から(何故か)対応するようになった。

おまけ

ちなみに、 複数指定されていた Content-Type を、それぞれ一つずつ選んで渡してみたところ、次のような結果に。

	iOS4.2	iOS4.0
audio/mpeg	○	○
audio/x-mpeg	○	○
audio/x-mpeg-3	○	×
audio/mpeg3	○	○

とはいっても、例えば、 “audio/mpeg, audio/mpeg3″ のように指定しても、やっぱり鳴らなかったので、

複数指定はやっぱりダメなようです。

まだ検証中。 とりあえず検証してる内容をメモ。

何が起こったか

iOS4.1以下の端末(iPhone 3GS,iPhone4問わず)で、以下のスクリプトで音声再生ができない。 (実際に検証したのはiOS4.0の端末と、iOS4.2の端末)

var audio = new Audio('hoge.mp3');
$('#play').bind('touchend', function(){
    audio.play();
});

じゃぁなんでiOS4.1以下なの

Safari – Wikipedia iOS4.2 から Safari5 が搭載されるようになってる。怪しい。

HTMLMediaElement Class Reference | Safari Developer Library iOS4.1 まで使われていた autobuffer が廃止され、iOS4.2 からは preload というプロパティに変わっている。

この辺に原因があるのではと思い、この現象はiOS4.1以下で起こるものと推測する。

とりあえずわかったこと

この現象とは関係ないことも含む。

検証したのは、 iPhone4 : iOS4.0 iPhone3GS : iOS4.2 (タイトルの「iOS4.1以下」はあくまで推測なので、以降はiOS4.0とのみ記述)

07. video／audio要素のイベントを捕捉する ここを見ながら音声再生までに発生するであろうイベントを捕捉してみた。

        $(_audio).bind({
          emptied : function(){
            $('#test').append('emptied<br/>');
          },
          loadstart : function(){
            $('#test').append('loadstart<br/>');
          },
          progress : function(){
            $('#test').append('progress<br/>');
          },
          loadedmetadata : function(){
            $('#test').append('loadedmetadata<br/>');
          },
          loadeddata : function(){
            $('#test').append('loadeddata<br/>');
          },
          canplay : function(){
            $('#test').append('canplay<br/>');
          }
        });
        _audio.load();</p>

<p>

上記スクリプトで試したところ、 onload 時に loadstart はどちらのバージョンでも捕捉された。 touchend 時には、iOS4.2 ではloadedmetadata、loadedend、canplayが捕捉でき、 実際に音声も再生された。 iOS4.0では、loadstart 以外何も捕捉できず、音声も鳴らなかった。 emptied、progressはどちらの場合でも捕捉出来なかった。

とりあえずわかったのはここまで。

iOS4.0の場合 loadstart 後、データが読み込まれていないと思われるので、ここら辺を中心に検証を進めてみる。

■追記 2011/6/7 19:13 —————————————————————————-

audio.canPlayType("audio/mpeg");

ってやってみたところ、次の結果が。

iPhone4 : iOS4.0 : “probably” iPhone3GS : iOS4.2 : “maybe” PC : Chrome : “maybe”

そんな馬鹿な･･･

■追記 2011/6/8 18:17 —————————————————————————- HTMLにべた書きで、

<audio id="audio" src="hoge.mp3"></audio>

と書き、

var audio = $('#audio')[0];

とした場合、onload 時に、loadstartイベントが発生せず。

audio.load();

後にloadstartイベントが発生する模様。 ※new Audio(‘hoge.mp3′) でやった場合、という要素が生成されるから？ ちなみに、この場合 iOS4.0/4.2 共にemptiedイベントが発生する。 ■追記 2011/6/8 19:06 —————————————————————————- WAV/OGGを使ってる以下のアプリは動いた。 (OGGはサポートしてないはずなので、実質WAV) HTML5楽器

mp3 が原因なのかもしれない･･･。