to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

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

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サイト制作時に音声ファイルを利用する場合は、是非注意してみてください。
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
 
タグ: 
このエントリーをはてなブックマークに追加