Stop embedded audio with javascript

[kent83121408]

I have created an audio player using HTML5 and javascript. This is embedded as an HTML5 animation. There is a play/pause button and a stop button. This player is located on a smartshape that is hidden. When a user clicks a link, the smartshape appears and they are free to play/pause or stop the audio.

My dilemma is when they close the smartshape, is there a way to to stop the audio? The second question is if I have more than one audio embedded, is there a way to stop one player when the second starts?

I've attached a screenshot of the smartshape with the player. The HTML5animation is actually a zip folder containing an HTML page, CSS, the javascript code, images of the bottons and an mp3.

[TLCMediaDesign]

You are going to need to add an event listener in your HTML5 animation to listen for the Close button.

window.parent.window.getElementById("CloseButton").addEventListener( "click", stop, false);

[kent83121408]

That didn't seem to work. Maybe I'm not putting the code in the right place. Also, the 'close_sample' button is not part of the animation so will the javascript listen for the close_sample button even if it's not part of the HTML5 animation?

document.addEventListener("DOMContentLoaded", function(event) {

window.parent.window.getElementById("close_sample").addEventListener( "click", stop, false);

var music = document.getElementById('music'); // id for audio element
var pButton = document.getElementById('pButton'); // play button
var sButton = document.getElementById('sButton'); // stop button

// play button event listenter
pButton.addEventListener("click", play);

// stop button event listener
sButton.addEventListener("click", stop);

//Play and Pause
function play() {
// start music
if (music.paused) {
music.play();
// remove play, add pause
pButton.className = "";
pButton.className = "pause";
} else { // pause music
music.pause();
// remove pause, add play
pButton.className = "";
pButton.className = "play";
}
}

//Stop
function stop() {
if (music.play) {
music.pause();
music.currentTime = 0;
// remove pause, add play
pButton.className = "";
pButton.className = "play";
}
}
/* DOMContentLoaded*/
});

[TLCMediaDesign]

Sorry it should be:

window.parent.window.document.getElementById("close_sample").addEventListener( "click", stop, false);

[kent83121408]

Thank you for the revision. It's still not working. I might have to do something different.