2014年11月19日水曜日

SoundCloud SDK 2.0ではモバイルブラウザー上で音楽再生できない問題について

モバイルブラウザーで再生できない!

らしいのだ。

Playing a streaming on mobile not working. · Issue #5 · marcoscolina/player

まさかとは思ったが、SoundCloud SDK 2.0ではモバイルブラウザーで再生できない問題が本当にあることが分かった。Android 4.4.4と4.2のChrome、iOS8.1のSafariでダメなので、基本的にモバイルブラウザーでは再生できない問題があると言わざるを得ない。


SDK2をハックして再生可能に

SDK2のソースコードを解析した結果、問題が分かった。

デスクトップではHTML5AudioPlayerで再生するが、モバイルではHTML5Audioをサポートしているのにもかかわらずsingleaudioplayerというもので再生するようになっていた。ここを強制的にHTML5AudioPlayerで再生するように変更することで再生できるようになった。




このサンプルのコード一式はここにある。
junkoro/SoundCloud-SDK2-on-mobile

js/SoundCloud2.jsは http://connect.soundcloud.com/sdk-2.0.0.js を改造したもので、js/audiomanager.js はSDK2で自動的に読み込まれるものを改造したものだ。

とりあえず再生できるようにはなったものの多くの人が困っていると思われるので、この件についてSoundCloudに問い合わせてみようと思う。


AutoPlay問題

しかし、ひとつ問題があることが分かった。AutoPlay問題だ。再生することはできるのだが、再生するにはメディアをロードした後に必ずユーザーのタッチ操作が必要になる。

Overcoming iOS HTML5 audio limitations
http://www.ibm.com/developerworks/library/wa-ioshtml5/

Making HTML5 audio actually work on mobile | Pupunzi
http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/

iOSに限らず、Androidでも同様だ。ユーザーが望まない映像や音楽を自動的に再生できないようにという配慮なのだが、Webアプリにとっては非常に問題になる場合がある。

この問題の回避方法は恐らく無い。しかし、Cordovaなどでハイブリッドアプリを作っている場合には、WebViewの設定を変えたり、プラグインを介してネイティブのライブラリを呼ぶなどして回避できる可能性がある。

実際、Android上でWebViewとしてCrosswalkを使った場合には回避できた。iOS上では未確認。