スマホでの音楽ストリーミング再生のマジックコード

ストリーミングHack

　スマホのでの音楽再生、Ajaxやら色々ごにょごにょする際に、ユーザイベントでの音楽の初期化が必要になってくる。普通にやろうとすると、Ajaxを挟んだ音楽再生はユーザイベントが途切れるのでできないが、その前に何らかのファイルを再生をしておくとうまくいく。
　そこで、無音の短い音楽ファイルをbodyへの初回タッチイベントにて再生をさせておこう。ストリーミング形式である必要はない。 .one()もたまに使ってあげよう。

sound.js

        sound = document.createElement((isIOS) ? 'audio' : 'video');
        $(sound).attr('id', 'video')
                .attr('width', '1')
                .attr('height', '1')
                .attr('controls', false)
                .attr('preload', 'auto')
                .attr('autoplay', true);
        $("#playerObject").append(sound);

        var source = document.createElement('source');
        $(source).attr('type', 'video/mp4').attr('src', "start.3gp");
        $(sound).html(source);
        sound.load();

        // MAGIC FUNCTION
        $("body").one("touchstart", function () {
            sound.play();
        })

後は、Ajaxをはさもうが再生できるようになっているはず。

備考

　現状、スマホの音楽のプラグイン無しでのストリーミングは動画の規格であるHLS(Apple http live streaming:Android4.0+、iOS3.0+対応)を使用する他ない。
iPhoneでは、動画は自動的に全画面化されてしまうので、Audioタグを使う。また、Androidでは、AudioタグのHLSは対応していないので、videoタグを使う。
　尚、Androidのvideoタグは標準ブラウザなどで、videoタグを1px*1pxで表示させておかないと再生されない端末もあるので、ならない場合はまずそこを疑うと良い。

　とりあえず標準ブラウザでの検証を行い、仕様を握っておくことは不可欠。chromeを推奨しましょう。標準ブラウザはすごくヤバイ。ほんとヤバイ。。。
　Android2.xはFlashのStrobeMediaPlaybackを使用する。Flashはデバイス依存ではないので、結構容易い。

Android4系はシークが効かないよ。(爆)

http://www.jwplayer.com/blog/the-pain-of-live-streaming-on-android/
アプリでも効かないよ(爆)
http://www.slideshare.net/myatsumoto/android-22488565

というか色々ヤバかった。

1. Starting the stream requires 3 clicks on the play button
2. Video is blown up to screen size, irregardless of aspect ratio
3. Seeking does not work in windowed mode (but works in fullscreen)
4. Browser tab crashes when attempting to go fullscreen
5. The first time the stream starts, only audio plays. After another play/pause, video shows too.
6. Toggling play/pause does not work in fullscreen (but works windowed)