Everything you ever wanted to know about the HTML5 Audio Player

This is a post about a tiny little javascript object — with a widget no bigger than a pinky finger depending on your browser zoom, and with usually just two or three buttons. Despite its size and modest appearance, it is still capable of streaming, downloading and buffering your audio based media, accommodating browser fallbacks,

So how do you instantiate an JS Audio Object? It all starts with

var audio = new Audio(“url”)

This creates an Audio object. It has a LOT of attributes and events, many are shared with the Media object which is its parent class.

When it comes to its unique properties there are not too many — here’s a list:

[autoplay, autobuffer, buffered, controls, loop, muted, played, preload, src, volume, type]

The Audio Object also has several methods and events that are really important to be able to call and hook onto. Here’s a list of the most important Audio Object events:

[playing, played, canplaythrough, pause, timeupdate]

And important methods:

[play(), pause(), volumechange(), canPlayType()]

Specifying the src

The src attribute specifies where the audio is coming from. It is a good idea to actually set the audio source from javascript rather than explicitly defining it in the HTML, because this makes it easier to accommodate browser fallbacks. here’s a little snippet:

if (AudioElement.canPlayType(‘audio/wav;’)) {
  AudioElement.type= ‘audio/wav’;
  AudioElement.src= ‘http://www.nch.com.au/acm/sample.wav';
 } else {
  AudioElement.type= ‘audio/mp3’;
  AudioElement.src= ‘http://www.nch.com.au/acm/sample.mp3';
 }

This method chooses whatever type of audio the current browser will be able to play and uses that to create the audio element.

Getting the audio to start

This one is really as simple as firing the play() and pause() events for the Audio Object you created.

var play = document.getElementById("play"),
    pause= document.getElementById("pause");
play.on(‘click’, function(e) {
  console.log(“clicking the play btn”);
  e.preventDefault();
  AudioElement.play(); 
 });
pause.on(‘click’, function(e) {
  console.log(“clicking the pause btn”);
  e.preventDefault();
  AudioElement.pause();
});

Tracking audio playing progress

this basically involves hooking onto the “timeupdate” event that is fired off every ~200ms while the video is playing.

AudioElement.addEventListener(“timeupdate”, function (e) {
 console.log(song.currentTime);
 doSomethingToTheDOM()
});

The DOM function will likely contain some code to change a progress slider or possibly sync up this audio with others. here’s an example:

var progressTracker = getElementByID(“progress-bar”);
function timeUpdate() {
  var playPercent = 100 * (song.currentTime / song.duration);
  progressTracker.style.marginLeft = playPercent + “%”;
}

Using native controls

If you decide to not create your own audio player you can use the HTML native audio player. This is fairly simple to do just mark the “controls” attribute as true. When you append the element somewhere in the DOM it will produce something that looks like this:

The danger here is that this audio player will look differently depending on the browser that you are using. Use at your own risk, and build your own interface for interacting with the Audio Object if you are looking for consistency.

Browser Compatibility — as of 4/2017

The Audio element is broadly supported across most desktop browsers. The only browser that will not support the full range of audio element features is IE 8 and below. This includes all attributes with spotty coverage in mobile browsers, like autoplay, multiple audio streams, and auto-buffering.

When it comes to mobile coverage is less perfect, as mentioned before.

All mobile browsers attempt to decrease the amount of data consumed by media objects by disabling events that cause auto-downloading.

What this means is that the Audio attributes “autoplay”, “autobuffer”, and “preload” do not work, and also the media event “play(…)” often must be initiated by user action, like a click or blur event. Most mobile browsers have weakened their grip and allow the “load(…)” method to fire independently. To get your audio to autoplay on mobile you will need to fire the play(…) event when the user follows the link to get to your audio, or some other event that you know for certain will happen.