html - 非表示のものも含めて、オーディオのすべてのインスタンスを停止します

Question

非表示のものも含めて、DOM 全体でオーディオのすべてのインスタンスを停止 (および現在の時間を 0 にリセット) するにはどうすればよいですか? このコードで現在再生中のオーディオを停止できません。

$('.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();
        });
    },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">
            <source src="../../site/music/music1.mp3"/>
            <source src="../../site/music/music1.ogg"/>
        </audio>
    </div>

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

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

</div>

別のページへのリンクをクリックすると、3 つのオーディオ要素すべてを停止してリセットする必要があります。現在は停止しないため、フェードインするオーディオ要素の再生ボタンをクリックした瞬間に、2 つのオーディオが同時に再生されているように聞こえます。興味深いことに、オーディオはフェードアウトします。

3 つのオーディオ要素はすべて、意図したとおりにまったく同じ場所にあることに注意してください。