Stop HTML5 audio with Javascript (Jquery?) + Zurb Modal

Question

Here's my goal: To have autoplay audio stopped when a Zurb Modal window disappears.

I'm new with doing this stuff, especially javascript!

I have a Zurb Modal window functioning as a splash screen that pops up on page load. I have HTML5 audio in the window that autoplays (it was a request - I don't like autoplay!). The window disappears when the background is clicked, but the audio continues to play. I don't know how to get the audio to stop! If anyone has an idea, I'd really appreciate hearing about it.

<script type="text/javascript" src="js/jquery.reveal.js"></script>

<div id="myModal" class="reveal-modal">  

    <audio controls="controls" autoplay="autoplay">
        <source src="audio/splash-loop-01.mp3" type="audio/mpeg">
        <source src="audio/splash-loop-01.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
</div>
<div class="close-reveal-modal">CLOSE ME</div>​<!-- USE THIS TO CLOSE WINDOW -->

<script>
$(document).ready(function (){
    $('#myModal').reveal();
});
</script>

Answer 1

$(document).ready(function (){

    $('.close-reveal-modal').click(function(){

    audioPlayer.pause();
    audioPlayer.src = '';
    audioPlayer.load();

    });

});

Answer 2

To pause the audio, place this in your document.ready :

$('.close-reveal-modal').click(function(){
    var myAudio = document.getElementsByTagName("audio")[0];
    if(myAudio != undefined){
        myAudio.pause();
    }
}