HTML5 Audio – tips & tricks

I’ve often said that I think being a CEO who can code is like having a super power. Every now and then I like to use those powers for evil and recently added an easter egg to our new team page (see if you can find it).

The “improvement” involved using the new HTML5 Audio API’s. I’ve been playing with HTML5 audio a little over the years with my passing interest in HTML5 based game engines. I already knew that HTML5 Audio was a bit on the dodgy side but I could get it to do what I wanted. Hopefully these tips will help other folks out.

1. MP3 might not be enough

Firefox and Opera can play MP3 files, but they don’t have full support. This includes being able to set the position in the track. I got it all working in Chrome and then, being the experienced guy I am, tried it in Firefox. It just looped the start of the audio. Who knew different browsers would behave differently?!

In HTML5 you set the position like so:

var audio = document.getElementById("myAudioElement");
audio.currentTime = 5;

This would set the position to 5 seconds into the sound file. This does not work with MP3 files in Firefox or Opera.

How do you solve it? Easy: Multiple formats. Firefox will play ball with Ogg audio files. You can specify multiple audio files in the audio element as so:

<audio id="wc2">
  <source src="/sounds/music.ogg" type="audio/ogg">
  <source src="/sounds/music.mp3" type="audio/mpeg">
</audio>

The browser will use the type they best understand.

2. IIS doesn’t like Ogg by default.

This only applies to folks hosting with IIS as their web server. IIS won’t serve .ogg files until you tell it about the type. This is easy to do by adding the following to your web.config file:

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
  </staticContent>
</system.webServer>

This may also apply to Apache etc but I didn’t need to find out.

3. Time resolution is atrocious for HTML5 audio

Assuming you’re like me and wanting to stop / start your audio, move around the file, etc, you’re going to have a hard time with the time with HTML5 audio. There’s an event you can hook off the audio element that fires when the time updates:

var audio = document.getElementById("myAudioElement");
audio.addEventListener("timeupdate", function() { console.log(audio.currentTime); });
audio.play();

If you run this up with the dev console open that this event fires at a certain interval. This is usually somewhere between 200-250ms. Oh yeah, did I mention that different browsers fire it at different intervals? They do, and it makes fine grained control a pain.

There’s also ranting and raving all over the internet about how the .currentTime property doesn’t necessarily get updated quickly either. That means there’s no big opportunity to just use a higher resolution .setTimeout call to give yourself finer grained control (at least not to the single ms level anyway).

There are two things you can do here:

1. Use multiple audio elements for different files
2. Add a lot of empty space in your audio file before and after the sounds you wish to play

I chose the latter approach simply because I don’t like a lot of web requests. You can consider it the audio equivalent of audio spriting.

Done!

I’m by no means an expert with HTML5 Audio, but I’m picking that the issues I ran into won’t be too uncommon for folks. I hope these tips help you out 🙂