iOS, Android での HTML5 Audio 再生について
HTML5 Audio を 使って音声ファイルを再生したい。具体的には、
のように、JavaScript から ファイルを指定して再生したいというのが今回の趣旨です上記のコードで何の問題もなく再生できると思っていたのですが、若干制約があるようなのでメモ。
Android 上の Chrome ではメディアの自動再生はされない
色々調べている間にこのスレッドに行き着きました。
This is intended. Autoplay is not honored on android as it will cost data usage.
つまり、知らないうちにユーザの従量課金 ( 通信料 )でメディアがダウンロードされるのを防ぐため、メディアは自動再生できないとのこと。
この制限の影響で先のコードを書いただけでは再生することはできず、touchstart 等の ユーザによる操作のイベントの中で再生処理をする必要があります。例えば下記のような形です。
再生ボタンを押す、何かタップに応じて効果音を出す、といった形で音を出すことになります。
iOS 上の Safari ではメディアの自動再生はされない ( と書いてある )
iOS ではどうかというと、Safari Developer Library の 「 Safari HTML5 Audio and Video Guide 」には、
Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS
とあります。つまり、知らないうちにユーザの従量課金 ( 通信料 )でメディアがダウンロードされるのを防ぐため、メディアは自動再生できないとのこと。趣旨は、Android と同じですね。
しかし、実際に試してみると手元の iPad mini Retina ( Wi-Fi ) 、iPhone 4S ( Celluar ) いずれも iOS7 では、特にタッチイベント等の中で処理しなくても再生することができました。自動生成の制限が最新バージョンで解除されているのか ( iOS 6 で Web Audio API にも対応しましたし ) 、環境によるのかは不明です。
共通のコードで iOS, Android 両方に対応するには
タッチ等のイベント内で再生処理をするということであれば、iOS, Android ともに、HTML5 Audio を使うことができます。この方針なら、iOS, Android 共通のコードで実装していくことができます。ネイティブアプリ化する前提で PhoneGap を使うという方法もありますが、PhoneGap の Media API は、
NOTE: The current implementation does not adhere to a W3C specification for media capture, and is provided for convenience only. A future implementation will adhere to the latest W3C specification and may deprecate the current APIs.
とのことなので注意が必要です。
このあとは
今回は、iOS, Android での HTML5 Audio の再生についてご紹介しました。最後にご紹介した PhoneGap の使い方、開発 Tips に関しましては、下記の記事も合わせてご覧ください。
PhoneGap Developer App でコードの変更をリアルタイム自動更新しながらデバッグ - Yuta Watanabe's Blog
