Preload audio then start animation?

This site is best viewed in a modern browser with JavaScript enabled.

jaqen_hgar

Hi.. I'm using CSS3/HTML5 to replace Flash for something and it requires MP3/OGG to start at the same time animation does. Unfortunately I've read that JS is the only way to make sure the files pre-load on time. Currently I'm using what seems like a barbaric solution of using the code below on a welcome.html file with a redirect set at 5 seconds, assuming that gives everyone enough time to download the file and then it redirects to my animation.html

Is there anyway to make this code below download the files, then load my animation? Preferably without any refreshing. Thanks in advance.

mySound = loadAudio('/audio/valmp3.ogg'); //Doesn't count in 'filesLoaded'!!
mySound2 = loadAudio2('/audio/valmp3.mp3'); //Doesn't count in 'filesLoaded'!!

filesToLoad = 2;
filesLoaded = 0;


function loadAudio(uri)
{
    var audio = new Audio();
    //audio.onload = isAppLoaded; 
    audio.addEventListener('canplaythrough', isAppLoaded, false); // It works!!
    audio.src = uri;
    return audio;
}

function loadAudio2(uri)
{
    var audio = new Audio();
    //audio.onload = isAppLoaded; 
    audio.addEventListener('canplaythrough', isAppLoaded, false); 
    audio.src = uri;
    return audio;
}

function isAppLoaded()
{
    filesLoaded++;
    if (filesLoaded >= filesToLoad) main();
}