Intro to the HTML5 Audio Element Tutorial

Although there are various ways to get basic audio working on your page, most people are not using the <audio> element to its full capacity, and I think they are missing out.

Perhaps you want play and pause buttons, volume controls and the like? Maybe you need to time the playing of your file? Maybe you need to navigate around your audio file and extract meta data?

With the <audio> element and a little bit of JavaScript you can find out what's really going on under the hood and craft your application accordingly.

That's what I'll be demonstrating for you in quick this tutorial. We'll take a look under the hood at how this element and its associated events work.

It's pretty basic, and its targeting beginners, so you advanced kids might want to go and watch something else. You might prefer spending your time investigating the HTML5 Audio API (which is little more advanced, covering buffers, typed arrays and all that fun stuff).

If you want to follow along, just download the project files.


Online HTML5 Training

If you're looking for something more comprehensive and interactive, sign up for my upcoming HTML5 Bootcamp online course.


Further Resources

They say: The spec is quite unclear on the removeAttribute() scenario and setting a <video> 'src' attribute to an empty string can cause an unwanted request (Mozilla Firefox 22). I always use null and have not experienced this.

Tests for browser service

Wikipedia, as always, is a good resource for information

A great resource. Note the difference between canplay and canplaythrough

Published April 1, 2015