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" />

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");


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

Enjoy this article? Let's keep in touch

I really appreciate you taking the time out of your schedule to read this post. I like to keep my friends updated on new articles and also spawn discussions here and there.

If you'd like to keep in touch, please subscribe below. And I promise, no more than 1 email per week (if even that).