Stop HTML5 audio tag in jQuery

Question

I am using a jquery plugin to do a site tour. To define the stops of the tour you create a ordered list with a specific ID and use the line items to seperate the stops.

HTML:

<ol id="joyRideTipContent">
    <li>
        <center>
            <audio id="welcome" src="intro.mp3" controls></audio>
        </center>    
        <h2>Stop 1 title</h2>
        <p>Stop 1 content</p>
    </li>
    <li>
        <center>
            <audio src="sectionIntro01.mp3" controls></audio>
        </center>
        <h2>Stop 2 title</h2>
        <p>Stop 2 content</p>
    </li>
    <li data-id="s01c01">
        <p>Stop 3 content<p> 
    </li>
</ol>

My audio embedding works fine using: (placing the embed code into the line item)

<audio id="myID" src="filename.mp3"></audio>

I can not get it to stop playing, I have tried many methods, primarily I have been trying to find the calls to the close button and next button in the *.js and place a call to pause in there... ie.

welcome.pause(); 

This does not work.

I used the joyride plugin available here

Answer 1

welcome.pause() should be DOMElement.pause() . Your code will work as long as you've actually selected the DOM Element:

var welcome = $("#welcome")[0];

or

var welcome = document.getElementById('welcome');

Answer 2

I have solved this issue:

Replace:

welcome.pause();

In the jquery function with:

jQuery('audio').each(function(){ this.pause() });