Html5 audio preload="none" messes up pause() and currentTime

[windbrand]

I'm having a really weird problem pausing and resetting progress of html5 audio.

If I set preload="none", then "pause();" and "currentTime=0;" will not execute, I know this as I've set an alert() after it and the alert() doesn't execute. The moment I delete preload="none", everything works, and the alert() will of course execute.

This is my code. I fade in/out a couple of pages, each pages has an html 5 audio element in the same position (intended), so the user can play that page's music when visiting that page.


$('.link').on('click', function(e){
$('.pagecontainer>div').fadeOut();
$(this.getAttribute("href")).fadeIn();
stopAudio();
});

function stopAudio() { //fade out and stop any current audio
$('audio').animate({volume: 0}, 1000);
setTimeout(function(){
$.each($('audio'), function () {
this.currentTime=0;
this.pause();
alert('audio has been stopped and reset');
});
},1000)
}

$('.sound').on('play', function () { //since volume was faded out, reset volume when click play button
$('audio').animate({volume: 1}, 100);
});


<a href="#page1" class="link">Audio 1</a>
<a href="#page2" class="link">Audio 2</a>
<a href="#page3" class="link">Audio 3</a>

<div class="pagecontainer">

<div id="page1"> //all three audio elements are in exact same spot
//clicking page link fades in current audio and fades in new one
<audio controls loop class="sound" preload="none">
<source src="../../site/music/music1.mp3"/>
<source src="../../site/music/music1.ogg"/>
</audio>
</div>

<div id="page2">
<audio controls loop class="sound" preload="none">
<source src="../../site/music/music2.mp3"/>
<source src="../../site/music/music2.ogg"/>
</audio>
</div>

<div id="page3">
<audio controls loop class="sound" preload="none">
<source src="../../site/music/music3.mp3"/>
<source src="../../site/music/music3.ogg"/>
</audio>
</div>

</div>


When I click a link to another page, I need to stop and reset all three audio elements. Currently since it doesn't stop, the moment I click the play button of the audio element that fades in, I hear two audios playing at the same time. Though interestingly the audio does fade out.

As mentioned, if I delete preload="none", then the alert('audio has been stopped and reset') will fire, and everything works fine.

Does anyone know how I can load the audio only when needed (if I take out preload="none") then my website won't work in Chrome, about 20 music files will all try to load at the same time causing Chrome to hang), but make my script work?

Urgent~ thanks!