HTML5オーディオのMP3再生対応を検出する方法【Modernizr・JavaScript活用】

HTML5オーディオがMP3に対応しているか検出するには

Webサイトで音声ファイルを扱う際、ユーザーのブラウザがHTML5オーディオのMP3形式に対応しているかどうかを事前に確認したいケースがあります。最も手軽で確実な方法は、機能検出ライブラリ「Modernizr」を利用することです。

Modernizrライブラリを使った検出

Modernizrは、ブラウザが特定のHTML5やCSS3の機能に対応しているかを自動的に判定してくれる定番ライブラリです。公式ドキュメントによると、オーディオ関連の機能検出にも対応しており、MP3サポートの有無も簡単にチェックできます。

出典：Modernizr公式ドキュメントのスクリーンショットより

Modernizrを読み込んでいれば、以下のようにプロパティを参照するだけで判定結果を取得できます。

if (Modernizr.audio.mp3) {
  // MP3再生に対応している場合の処理
} else {
  // 非対応ブラウザ向けのフォールバック処理
}

User-Agent（ユーザーエージェント）による判定

もうひとつの方法として、User-Agent文字列を解析し、アクセスしてきたブラウザの種類を特定するアプローチもあります。ただし、User-Agentは偽装可能であり、ブラウザのバージョンアップによって挙動が変わることもあるため、あくまで補助的な手段と考えるのが安全です。

JavaScriptだけでMP3対応をテストする方法

外部ライブラリを使わず、純粋なJavaScriptだけで判定したい場合は、<audio>要素のcanPlayType()メソッドを利用します。

var x = document.createElement('audio');
return !!(x.canPlayType && x.canPlayType('audio/mpeg;').replace(/no/, ''));

このコードでは、まずcreateElement('audio')でオーディオ要素を生成し、canPlayType('audio/mpeg;')の戻り値から「no」という文字列を除去しています。結果が空文字列でなければMP3再生に対応していると判断でき、論理値として返却されます。

まとめ

• Modernizrを使えば、MP3対応の有無を簡単かつ確実に検出できる
• User-Agent判定は補助的な手段として活用する
• ライブラリ不要ならcanPlayType()を使ったJavaScriptでのテストが有効

用途に応じてこれらの手法を使い分けることで、さまざまなブラウザ環境でも安定した音声再生を実現できます。