スマートフォン向けサイトで再生可能な音声ファイルと、audioタグでの注意点
こんにちは。x-fitチーム・エバンジェリストの渡辺です。HTML5では、audioタグを使って音声ファイルをプラグインなしで扱うことができるようになっています。スマートフォン向けサイトで音声ファイルを再生させる場合、どのファイルが再生可能なのか、まとめてみようと思います。
audioタグとは
以前のブラウザでは、プラグインを使って音声を再生していましたが、HTML5で導入されたaudioタグにより、HTMLタグのみで音声を扱うことができるようになりました。指定できるおもな属性は以下のものがあります。
- src:音声ファイルのURIを示します。
- autoplay:自動再生するかどうかを指定します。
- loop:ループ再生するかどうかを指定します。
- controls:音声再生のコントロールインターフェースを表示するかどうかを指定します。
スマートフォンでの動作
各OSでの音声ファイルの再生についてみてみましょう。下記のようなHTMLを作成し、それぞれのオーディオファイルの再生ができるかどうかを確認してみます。対象とするブラウザは、
- iOS:Safari
- Android:Androidブラウザ(アプリ名称:ブラウザ)
- Windows Phone:Internet Explorer
サンプルHTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>audio test</title> </head> <body> <div id="content"> <h1>audio tag</h1> wav file<br> <div> <audio controls preload="metadata"> <source src="sample.wav" type="audio/x-wav"/> </audio> </div> mp4 file<br> <div> <audio controls preload="metadata"> <source src="sample.m4a" type="audio/mp4"/> </audio> </div> aac file<br> <div> <audio src="sample.aac" controls preload="metadata"> <source src="sample.aac" type="audio/aac"/> </audio> </div> mp3 file<br> <div> <audio src="sample.mp3" controls preload="metadata"> <source src="sample.mp3" type="audio/x-mp3"/> </audio> </div> ogg file<br> <div> <audio src="sample.ogg" controls preload="metadata"> <source src="sample.ogg" type="audio/ogg; codecs=vorbis"/> </audio> </div> flac file<br> <div> <audio src="sample.flac" controls preload="metadata"> <source src="sample.flac" type="audio/ogg; codecs=flac"/> </audio> </div> </div> </body> </html>
結果
端末 | OS | wav | mp4 | aac | mp3 | ogg | flac |
---|---|---|---|---|---|---|---|
iPhone 4 | iOS 4.0 | ○ | ○ | ○ | ○ | × | × |
iPad | iOS 5.1 | ○ | ○ | ○ | ○ | × | × |
iPhone 5 | iOS 6 | ○ | ○ | ○ | ○ | × | × |
Xperia | Android_1.6 | × | × | × | × | × | × |
IS04 | Android_2.1 | × | × | × | × | × | × |
X06HT | Android_2.2 | × | × | × | × | × | × |
Xperia arc | Android_2.3 | ○ | ○ | × | ○ | × | × |
Optimus Pad (L-06C) | Android_3.0 | ○ | ○ | × | ○ | ○ | × |
GALAXY NEXUS | Android_4.0 | ○ | ○ | ○ | ○ | ○ | × |
IS12T | Windows Phone 7.5 |
× | ○ | ○ | ○ | × | × |
iOSには、再生可能ファイルに一貫性がありますが、Androidは、バージョンが進むにつれて再生可能ファイルが増えていっています。とはいえ、Android2.3以前はブラウザ上ではファイル再生はできないという状況です。
audioタグの機種依存事例
ページロードが完了しない
このaudioタグですが、一部の機種でページロードが完了しなくなる、という現象が発生します。ページロード直後に、タッチイベントのバインドなど、JavaScriptを実行させるような場合、ロードが完了しないと実行されなくなるため、表示上の問題が発生することがあります。私たちの確認したものでは、
- Sony Tablet S
- Sony Tablet P
- BlackBerry Bold 9780
- ETBW11AA ・P-04D
- その他Android 3系の一部機種
で発生しています。
チェックボックスやラジオボタンをJavasScriptでdisabledにした状態が保持されない
また、JavaScriptを使って、チェックボックスやラジオボタンをdisabledにした後、ページ遷移してブラウザバックすると、通常disabledにされた状態を保っているのですが、audioタグを使ったページの場合、ブラウザバックするとdisabledされた状態が保持されない現象が発生します。この現象は
- Android2.1以下のAndroidブラウザ(アプリ名称:ブラウザ)
- Android4.0以上で搭載されるChrome
- Windows PhoneのInternet Explorer