File formats for the <audio> tag

Which audio format is the best, most interesting and future-proof for web delivery today? In addition to WAV and AIF (not so good due to file size), what formats are there?

Today, it looks something like this for the tag in HTML5. However this table is very dependent on what you have installed in your local computer. Please check the "Audio Tag Test" below.

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

Audio Tag Test

This <audio> tag test is telling you what your browser is capable of.

<audio src="soundfile.ogg" />

Your browser reports:
Opus: ... Webm Audio: ... Vorbis Ogg: ... MP3: ... MP4: ... AIF: ... FLAC: ...

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 */
}

|•|

Extended your browser capabilities

*** Enhanced compatibility in IE9:

http://www.webmproject.org/ie/ (support for webm)

http://xiph.org/dshow/ (support for ogg, flac, opus?)

By default, Internet Explorer Version 9 only supports MP3 and M4A.

Enhanced compatibility in Safari (add QuickTime components in mac)

* Get Safari to play webm, ogg, etc content with QuickTime components

https://code.google.com/p/webm/downloads/detail?name=WebM%20Component%20Installer.pkg&amp;can=2&amp;q=

http://www.xiph.org/quicktime/download.html

|•|

Copyright © 2019 HEAMUSIC, Hans E Andersson. All rights reserved.
heamusic

Login