HTML5のaudioタグのiOS/Androidブラウザ対応状況まとめ

スマートフォン向けのWEBページで、再生ボタンをタップした時に訪問者にオーディオコンテンツを聞かせたいという要件があり、HTML5のaudioタグについて調査したのでまとめます。 ここでいうブラウザとは、iOSであればSafari、Androidでは「ブラウザ」です。

尚、執筆時のiOSの最新バージョンは 6.1.3、Androidは4.2.2です。

再生できるオーディオ形式について

OS毎に再生できるオーディオ形式に違いがあります。 下表はそれをまとめたものです。

○ : 再生可、 △ : 一部端末で再生可、 × : 再生できない

※Android 2.3 の端末では、「△」とした項目のオーディオファイルが再生できる場合とできない場合があるみたいですが、「再生できない」と考えてWEBサイトを構築した方が良さそうです。

上表の通り、もしWEBサイトの構築要件で Android 2.x への対応が求められるのであれば、audioタグを利用したオーディオコンテンツの再生は諦めて、別の方法を模索した方が良さそうです。

audioタグを利用してWEBサイトを構築する場合、iOSとAndroidのどちらもサポートする場合には、MP3もしくはaacのオーディオ形式とすると良さそうです。 (WAVは非圧縮の音声形式ですのでWEBでの配信には適さないと思います。)

実装上の注意事項

各ブラウザのaudioタグへの対応は、まだまだ未完全である点や懸念事項があります。 それらの点についてまとめます。

iOSだと同時に再生できるのは1つ

同一ページ中にaudioタグが複数あり、1つ目のオーディオコンテンツを再生中に2つ目のオーディオコンテンツを再生しようとすると、1つ目の再生が停止して2つ目が再生されます。

iOSだとマナーモードでもスピーカーから音が再生されてしまう

iOSの設定でマナーモードや音が鳴らない設定にしていても、スピーカーから音声が再生されてしまいます。

オーディオファイルのURLは丸見え

HTMLのソースを表示すれば、オーディオファイルのURLが分かってしまうし、キャッシュにも残ってしまいます。 スマートフォンの標準のブラウザからはソースを閲覧することが難しいですが、パソコンのブラウザでページを開けてしまうとソースを確認することは容易です。 WEBページで流そうとしているオーディオコンテンツに権利がある場合などには、この特徴を知った上で(&お客様に説明した上で)実装する必要があります。

取り急ぎの調査結果をまとめただけに過ぎませんが、どなたかのお力になれればと思い記事にしてみました。 また更にノウハウが溜まれば、このページを更新していこうと思っています。