So-net無料ブログ作成
» スポンサーリンク

主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状況を調べてみた
» 音楽ネタ全般 

このブログを iPad の Safari でもそこそこ見れるように埋め込みの mp3 プレイヤーとか Flash 関連の扱いを前からコツコツといじっているのですが、いろいろやるついでに主要ブラウザの HTML5audio 要素の再生ファイル形式がどこまで対応しているのか調べてみました。

HTML5 の audio 要素について

» 基本構文
<audio src="音声ファイルのURL" >ここに未サポート時のメッセージ</audio>

» 属性
属性 用途
 src  再生する音声ファイルの URL
 controls  再生/停止ボタンなどのインターフェイスを表示する
 autoplay  ロード後に自動再生する
 loop  ループ再生する
 preload  none
 metadata
 auto
 再生前にデータを読み込まない
 再生前に再生時間などのヘッダ情報を読み込んでもよい
 再生前にデータを全て読み込んでもよい

テスト環境

» OS とブラウザ
OS、ブラウザともに現時点の最新バージョンで確認。
Internet Explorer は現行の IE8 は HTML5 に対応していないので対象外としました。
[追記]
IE9 beta を追加しました。(VirtualBox 上の Windows 7 にインストールして確認)» 音声ファイル形式
用意したファイル形式は以下の5種類7種類。
既に他の方々が検証したおおよその結果は知っているので、今回はもう少し突っ込んでダメ元で仕様に含まれていない SHOUTcast もテストしてみました。
[追記2]
AAC、FLAC を追加しました。
  • WAV (16bit/44.1kHz/stereo)
  • AIFF (16bit/44.1kHz/stereo)
  • MP3 (16bit/44.1kHz/128kbps/stereo)
  • OGG (16bit/44.1kHz/128kbps/stereo)
  • AAC (16bit/44.1kHz/128kbps/stereo)
  • FLAC (16bit/44.1kHz/stereo)
  • SHOUTcast ストリーミング (16bit/44.1kHz/128kbps/stereo)
    * SHOUTcast はストリーミング元のサーバの URL を指定
» テストページ
テスト用のページはこちら (注: IE 6~8 では動きません)

テスト結果

 OS  ブラウザ WAV AIFF MP3 OGG AAC FLAC SHOUT
cast
 Windows (7/XP)  Firefox 3.6 ○ × × ○ × × ×
 Chrome 7.0 × × ○ ○ ○ × ×
 Safari 5.0 ○ ○ ○ × ○ × ×
 IE9 beta × × ○ × ○ × ○
 OS X (10.6.4)  Firefox 3.6 ○ × × ○ × × ×
 Chorme 7.0 × × ○ ○ ○ × ×
 Safari 5.0 ○ ○ ○ × ○ × ○
 iOS 3.2 (iPad)  Safari ○ ○ ○ × ○ × ○
注: IE9 は XP 非対応のため Windows 7 だけでテスト

 どのブラウザでも再生できる共通のファイル形式がないというのは前から知っていたので驚くほどの結果ではないのですが、OS X と iOS の Safari で SHOUTcast の再生ができたのはちょっと意外でした。
 同じ Safari でも Windows 版では再生できなかったというのも興味深いところですね。
 
[追記]
IE9 beta の結果を追加しました。
WAV が再生できずに SHOUTcast が再生できたのが意外。

[追記2]
AAC、FLAC の結果を追加しました。
Firefox 以外で AAC が再生できて、FLAC が全滅という予想外の結果。

[追記3]
Chrome 9 は WAV 形式も再生できるようになっています。(Chrome 8 は未対応)

各ブラウザのスクリーンショット

参考までに各ブラウザのスクリーンショットも掲載しておきます。
audio 要素で表示されるプレイヤーはブラウザごとに見た目が変わります。(↓クリックで拡大)

» Windows 7 (XP でも結果とプレイヤーの見た目は同じ)
Firefox 3.6 - Windows 7Google Chrome 7.0 - Windows 7Safari 5.0 - Windows 7Microsoft Internet Explorer 9 beta

» OS X 10.6
Firefox 3.6 - OS X 10.6Google Chrome 7.0 - OS X 10.6Safari 5.0 - OS X 10.6
» iOS 3.2 (iPad)
Safari - iOS 3.2 (iPad)

 スクリーンショットだけを見ると Chrome と Safari は5つともプレイヤーが表示されていて、一見再生できるように見えますが、Chrome で再生ボタンがグレーになっているものと、Safari でミュートボタン(スピーカーのアイコン)が表示されていないプレイヤーは動きません。

IE9 beta はまだインストールしていないので後日改めて検証してみたいと思います。

[追記]
IE9 では HTML5 の DOCTYPE 宣言のままでは、IE7 互換表示モードになってしまって HTML5 のレンダリングが有効にならないので、以下の宣言をテストページの head 要素に追加しました。

<meta http-equiv="X-UA-Compatible" content="IE=9">

[追記2]
AAC、FLAC を追加してテストしたときに、Windows 7 と XP の Safari でページのロード時間が極端に遅くなる現象が発生しました。
プレイヤーの数を2つ減らして前回のテストの状態に戻すと発生しなくなります。
今回のテスト中では OS X の Safari では発生していません。(偶然?)
詳しい理由は分かりませんがあまりたくさん audio 要素を並べるのは良くなさそう。

[追記] 2012/05/19
Windows 版 Safari 5では、QuickTime 7 がインストールされていないと audio 要素が無効になってしまうようです。

[追記] 2013/06/29
Firefox 21.0から mp3 の再生に対応しているとの情報をいただきました。


[関連サイト]
 HTML5 W3C Working Draft
 Mozilla Firefox
 Google Chrome
 Apple Safari
 Microsoft Internet Explorer 9
 SHOUTcast


Google API Expertが解説するHTML5ガイドブック

Google API Expertが解説するHTML5ガイドブック

  • 作者: 羽田野 太巳
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2010/09/16
  • メディア: 単行本(ソフトカバー)
nice!(1)  コメント(6)  トラックバック(0)   » カテゴリー:音楽ネタ全般
permalink
trackback


» スポンサーリンク


nice! 1

コメント 6

Riever

wavでもmp3でも、ブラウザによらずに再生が可能でないというのは厄介ですね。
気楽に貼るのにわざわざUAでブラウザごとに指定するのも大変ですし、現状のまま行くならaudioタグは使い物にならない予感がします(^^;;
by Riever (2010-10-27 01:27) 

TAN

Firefoxがmp3に対応してくれると少しは普及も進みそうな気もするんですが、たしかmp3はW3Cの仕様には含まれてなかったはずなので、今後対応するかどうかは微妙なところかもしれませんね。

by TAN (2010-10-27 20:49) 

Just4U

Windows7_Windows版Safariでは、QuickTime_7.7.2をインストールするとAudioタグで再生できる。(212/05/15現在)
by Just4U (2012-05-19 19:51) 

TAN

情報ありがとうございます。
当時はQuickTimeはインストール済みで、ここ最近はiTunesがQT必須でなくなってからQTはインストールしなくなっていたので気がつきませんでした。
by TAN (2012-05-19 22:38) 

ハトネコエ

Firefox21.0 からかと思いますが、
Firefox がついにaudioタグのMP3も再生できるようになりました。

これで、mp3だけ用意すれば
主要ブラウザでは再生できることになって、うれしい限りです。

ここの情報にお世話になっておりましたので、
情報共有のために書きこませていただきました。
by ハトネコエ (2013-06-29 06:10) 

TAN

ハトネコエさん、情報ありがとうございます。
最近チェックしてなかったので知りませんでした。
あとで記事に追記しておきますね。
by TAN (2013-06-29 14:08) 

コメントを書く

名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 0

トラックバックの受付は締め切りました

iTunes Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac