Using the Audio Tag in HTML5 Succinctly and Effectively

by Joe Laudato

HTML5 provides the audio tag as a means to weave sound files into a website. It bears the general, essential form:

<audio src="enteryourURLhere" controls="controls"> fallback content (displayed when the audio tag does not work) </audio>

or, alternatively:

<audio controls> 
  <source src="enteryourURLhere" type="audio/enteryoursoundfileformathere">
  fallback content 

However, as with most HTML tags, there are several attributes which can allow further functionality of the audio tag:

  • autoplay (if present will compel the audio to play as soon as it is ready)
  • controls (if present will display a control panel)
  • loop (if present will make the audio repeat every time it finishes)
  • preload (“=auto” will compel the audio to load along with the page, while “=none” will prevent the audio from loading with the html page. if autoplay is present, this attribute is ignored)
  • src (defines the file path)

An example of a functional audio tag is as follows:

<audio controls="controls" autoplay="autoplay" loop="loop"> 
  <source src="soundclips/balloonpop.mp3" type="audio/mpeg">
  Audio tag is not supported.

This code will procure a sound clip of a balloon popping which will– providing that the audio tag is supported– load and play as soon as the file is ready, and will repeat ad infinitum. There are some minor adjustments to this code which will make it more succinct and better in terms of compatibility:

<audio controls autoplay loop> 
  <source src="soundclips/balloonpop.mp3" type="audio/mpeg">
  <source src="soundclips/balloonpop.ogg" type="audio/ogg">
  Audio tag is not supported.

The controls, autoplay, and loop attributes do not need to be defined as themselves in order to function properly, so leaving them as they are will result in a cleaner code. Using two source tags with two respective auditory file types will provide at least one “fallback” codec in case a certain browser cannot read the first file type.


Audio tag support:

  • Firefox 3.6, 4.02
  • Internet Explorer 9
  • Chrome 5, 6, 7
  • Opera 10.6
  • Safari 4, 5

Codec Support:

  • Firefox 3.6, 4.02 do not support mp3 or AAC; support wav &ogg/vorbis
  • Internet Explorer 9 does not support ogg/vorbis; supports mp3, wav, AAC
  • Chrome 5,6,7 do not support wav; support ogg/vorbis, mp3, AAC
  • Opera 10.6 does not support mp3 or AAC; supports wavogg/vorbis
  • Safari 4,5 do not support ogg/vorbis; supports mp3, wav, & AAC


No single file type will work across all audio tag supporting browsers, so two source tags must be defined for two codecs in order to produce functioning audio throughout browsers. One example of a pair of codecs that will function throughout each of the above browsers is wav & mp3.

~ by jtl29 on February 10, 2013.

%d bloggers like this: