Preloading Multiple Audio Tags in Internet Explorer 9

I had a unique problem. I have an app I’m working on where I needed to preload about 50 audio files for use during the page’s lifetime. If you’re up on your HTML5-fu, this is a simple task:

<audio id="myAudio" controls preload="auto">
     <source src="/my-podcast.mp3" />
     <source src="/my-podcast.ogg" />
</audio>

In Chrome, this works PERFECTLY (as it should).

In Internet Explorer, several (if not all) files will fail to preload. Here’s how to figure it:

var audioElement = document.getElementById("myAudio");
console.log(audioElement.networkState);

Network state can have 3 options: NETWORK_EMPTY, NETWORK_IDLE, NETWORK_LOADING, NETWORK_NO_SOURCE.

You “want” it to be IDLE, because that means the file is loaded. Typically, you’ll get NO_SOURCE with Internet Explorer.

What’s a quick fix? First, make sure there is no preload attribute, and then do this:

var audioElement = document.getElementById("myAudio");
audioElement.load(); // kicks off the load

This has worked for me in 100% of the tests I’ve done tonight. Feel free to comment on other solutions. I haven’t tested in IE10 yet, so I cannot be certain of how it works.

Originally published on 2012-11-02 in Development