スマートフォン向けサイトで再生可能な音声ファイルと、audioタグでの注意点

公開日： 2013/04/16

渡辺

HTML5 audioタグについて

こんにちは。x-fitチーム・エバンジェリストの渡辺です。HTML5では、audioタグを使って音声ファイルをプラグインなしで扱うことができるようになっています。スマートフォン向けサイトで音声ファイルを再生させる場合、どのファイルが再生可能なのか、まとめてみようと思います。

audioタグとは

以前のブラウザでは、プラグインを使って音声を再生していましたが、HTML5で導入されたaudioタグにより、HTMLタグのみで音声を扱うことができるようになりました。指定できるおもな属性は以下のものがあります。

src：音声ファイルのURIを示します。
autoplay：自動再生するかどうかを指定します。
loop：ループ再生するかどうかを指定します。
controls：音声再生のコントロールインターフェースを表示するかどうかを指定します。

取り扱うことのできる代表的なオーディオファイル形式は、MP3、AAC、Vorbis、WAVE、FLACなどがあります。

スマートフォンでの動作

各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

で確認されています。

audioタグが認識され、使えるかどうかという点でいえば、現在ほとんどのモバイルブラウザが対応していると言えますが、ファイル形式や、ページ内の他の要素への影響という意味では、まだ不安定な部分が多いのが現状です。

HTML5アプリや、Webサイト制作時に音声ファイルを利用する場合は、是非注意してみてください。

※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。

タグ:

現在地