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.

Code:
$('.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);
});
Code:
<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!