HTML5 audio 音源の拡張子やブラウザの対応状況 – HTML5 audio extension of source

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回のtipsは【HTML5 audio 音源の拡張子やブラウザの対応状況】に関してです。<audio>はブラウザに.mp3等の音源を配置し、再生停止等を簡単に実装できるタグです。問題はその対応ブラウザとブラウザごとに再生できる拡張子が異なる事です。本記事はその対応状況をまとめた記事になります。また関連記事としてHTML5 <video>タグによる動画の再生、現在の再生時間や終了のタイミングの取得方法等を書きましたので、よろしければ合わせてご参照頂ければと思います。

<audio>の使い方

設置はシンプルです。以下のようにたった5行で済んでしまいます。正確にはこのコードにcontrolsをつけたり自動再生のautoをつけたりします。


<audio>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.m4a" type="audio/m4a">
</audio>

<audio>の対応ブラウザ

対応ブラウザは【IE9,FireFox,Chrome,Safari,Opera】です。

ブラウザ別対応音源(拡張子)

現在の対応状況は以下のようになっております。個人的にブラウザを網羅する為にAdobe Media Encoderを使ってmp3を軽量化したり変換して対応しています。

IE Chrome FireFox Safari Opera
.mp3
.ogg
.m4a

以上になります。audioの詳しい使い方はまた後日。