Problem

The <audio> and <video> elements provide support for playing audio and video media without requiring plug-ins. Video codecs and audio codecs are used to handle video and audio, and different codecs offer different levels of compression and quality. A container format is used to store and transmit the coded video and audio together. Many codecs and container formats exists, and there are even more combinations of them. For use on the web, only a handful of combinations are relevant.

Different browsers do not support the same media formats in their implementations of HTML 5 video and audio, mainly because of patent issues.

The State Of Things

Currently, there are 3 supported file formats for the <audio> element: MP3, WAV, and OGG:

Browser MP3 WAV OGG
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES YES NO
Opera 10+ NO YES YES

Ps: See here for a more detailed breakdown of different format compatibility across different browsers (desktop-mobile, audio-video).

Progressing Enhancement/ Graceful Degradation

If audio support is detected, Modernizr assesses which formats the current browser will play. Currently, Modernizr tests OGG, MP3, WAV and M4A.

Important: The values of these properties are not true booleans. Instead, Modernizr matches the HTML5 spec in returning a string representing the > browser’s level of confidence that it can handle that codec. These return > values are an empty string (negative response), “maybe” and “probably”. > The empty string is falsy, in other words: Modernizr.audio.ogg == '' and > '' == false

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

That allows you to serve the appropriate format based on browser support for a particular format.


  1. W3Schools: HTML5 Audio
  2. Mozilla Developer Network: Media formats supported by the HTML audio and video elements
  3. Wikipedia: HTML5 Audio
  4. Modernizr: HTML5 Features