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.

FormatSize 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

Copyright © 2024 Hans E Andersson. All rights reserved.
heamusic

Login