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: NETWORKEMPTY, NETWORKIDLE, NETWORKLOADING, NETWORKNO_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.

comments powered by Disqus