読者です 読者をやめる 読者になる 読者になる

Yuta Watanabe's Blog

開発周りと、その他諸々

iOS, Android での HTML5 Audio 再生について

HTML5 Audio を 使って音声ファイルを再生したい。具体的には、

HTML5 Audio 再生

のように、JavaScript から ファイルを指定して再生したいというのが今回の趣旨です上記のコードで何の問題もなく再生できると思っていたのですが、若干制約があるようなのでメモ。

f:id:yuwata:20131227190813p:plain

 

Android 上の Chrome ではメディアの自動再生はされない

色々調べている間にこのスレッドに行き着きました。

This is intended. Autoplay is not honored on android as it will cost data usage. 

Issue 138132 - chromium - Chrome does not allow applications to play HTML5 audio without an explicit action by the user, which is different than how stock browser handles it. - An open-source project to help move the web forward. - Google Project Hosting

つまり、知らないうちにユーザの従量課金 ( 通信料 )でメディアがダウンロードされるのを防ぐため、メディアは自動再生できないとのこと。

この制限の影響で先のコードを書いただけでは再生することはできず、touchstart 等の ユーザによる操作のイベントの中で再生処理をする必要があります。例えば下記のような形です。

HTML5 Audio をタッチイベントで再生する

再生ボタンを押す、何かタップに応じて効果音を出す、といった形で音を出すことになります。

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 

Safari HTML5 Audio and Video Guide: Audio and Video HTML

とあります。つまり、知らないうちにユーザの従量課金 ( 通信料 )でメディアがダウンロードされるのを防ぐため、メディアは自動再生できないとのこと。趣旨は、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.

PhoneGap API Documentation

とのことなので注意が必要です。

このあとは

今回は、iOS, Android での HTML5 Audio の再生についてご紹介しました。最後にご紹介した PhoneGap の使い方、開発 Tips に関しましては、下記の記事も合わせてご覧ください。


PhoneGap Developer App でコードの変更をリアルタイム自動更新しながらデバッグ - Yuta Watanabe's Blog


PhoneGap の開発環境を Windows にインストール - Yuta Watanabe's Blog


PhoneGap iOS アプリ開発でのデバッグ - Yuta Watanabe's Blog