Familiarizing ourselves with HTML5's audio capabilities

In the last blog post, we saw how HTML5 provides a standard for playing video on screen. Audio too, has a similar story. Now, in the pre-HTML5 era, the only way to play audio in web pages was using plugins like flash. The problem was, not all browsers supported the same plugins. Some browsers might support plugin 'A', while others might support plugin 'B'.

With HTML5, forget plugins, because the browsers themselves will play audio using HTML5's <audio> element.

Minimum code and explanation

<audio controls>
  <source src="test1.ogg" type="audio/ogg"></source>
  <source src="test2.mp3" type="audio/mpeg"></source>
Your browser does not support the audio element.
</audio>

The audio tag specifies details about the audio that we're going to play. The controls attribute decides whether or not the default browser controls should be displayed on the screen. To specify which files should be played, we use the source element and specify the path of that file with the src attribute. It's also a good idea to specify the mime type of the file with the type attribute. And lastly, what if the person doesn't have a browser that supports HTML5 or the audio element? In that case, the text that is specified between the audio tags will be displayed.

Browser support

The major browsers like Chrome, Safari, Firefox, Opera do support the audio element. Internet Explorer too supports the audio element from version 9. But note that these browsers don't support all the formats for audio.

It's generally good practice to convert your audio into multiple formats and include all of them with multiple source elements just in case the browser doesn't support one of them.

Demo

In case you want to see how it actually looks on a browser, here you go! Try messing around with the controls a bit. Notice that different browsers might render this differently. Try it with various browsers to see how it looks in all of them!