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.

#html5