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.