File formats for the <audio> tag
What is the best, most interesting, and future-proof audio format for web delivery today? Aside from WAV and AIF, which can be problematic due to their large file sizes, what other formats are available?
When this document was written in 2013, the audio tag in HTML5 looked like the table below. However, it's important to note that the appearance of the audio tag can vary depending on the browser and version installed on your device. To ensure accurate results, we recommend testing the audio tag using the "Audio Tag Test" provided below. This test will help you determine how the audio tag behaves in different browsers and versions.
| Format | Chrome | Firefox | Safari | IE9 | iOS | Comment |
|---|---|---|---|---|---|---|
| Opus Audio |
no | yes** | no | no | no | Free (seems to be very promising) |
| WebM Audio |
yes | yes | no* | no | no | Free codec "made for the web" |
| Ogg Vorbis |
yes | yes | no* | no | no | Free codec (all Android) |
| MP3 | yes | yes*** | yes | yes | yes | Not free and potentially expensive licensing fees. |
| MP4 |
yes | yes*** | yes | yes | yes | Not free (iOS has only support MP3 and AAC). |
| FLAC |
no | no | no | no | no | Free Lossless Audio Codec (little support) |
** Requires Firefox 15+
*** Requires Firefox 35+
Please note that almost all can play uncompressed WAV files
Your browser reports:
Opus: ... Webm Audio: ... Vorbis Ogg: ... MP3: ... MP4: ... AIF: ... FLAC: ...
Audio Tag Test
This <audio> tag test is telling you what your browser is capable of.
<audio src="soundfile.ogg" />
Click on any of the different formats to see if they play in your browser.
| Format | Size | Comment | Encoding param |
|---|---|---|---|
| Opus Audio | 608K | Free codec (super fast and good quality) | opusenc --bitrate 160 |
| WebM Audio |
594K | Free codec | ffmpeg -codec:a libvorbis -b:a 160k |
| Ogg Vorbis |
839K | Free codec | oggenc -q 7 ... |
| MP3 | 1.0M | Not free and potentially expensive license fees | lame --alt-preset extreme |
| MP4 |
991K | A non free codec with potentially expensive licensing fees | iTunes 256 kbp/s (VBR) |
| FLAC |
2.6M | Free, loosless codec | flac --best ... |
| WAV |
5.7M | Raw PCM in 16bit 48 KHz | - |
| AIF | 5.7M | Raw PCM in 16bit 48 KHz | - |
This is a crude (but true) test to see what your browser really supports without USER_AGENT sniffing. This kind of test can be done with JavaScript like this:
audioSupport = !!(document.createElement('audio').canPlayType);
// check if audio tag is supported
if (audioSupport) {
var audioElm = document.getElementById("TheIdOfAudioTag");
// or like this
// var audioElm = document.createElement('audio');
var canPlayWebm = audioElm.canPlayType('audio/webm');
// and so on
}The first line of code creates an audioSupport variable using the double negation !! operator to convert the canPlayType method's return value into a boolean. The second line checks if the audio tag is supported by the browser.
If the audio tag is supported, the code proceeds to create an audio element using the getElementById method or the createElement method, depending on the chosen option. It then uses the canPlayType method to check if the browser can play the specified audio format, in this case, 'audio/webm'.
|•|eamusic – 2013-03-12