Stop embedded audio with javascript

New Here ,
Aug 28, 2020

Copy link to clipboard

Copied

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.

TOPICS
Advanced, Advanced actions, Audio and video

Views

89

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Aug 28, 2020

Copy link to clipboard

Copied

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);

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Sep 01, 2020

Copy link to clipboard

Copied

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*/
});

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Sep 02, 2020

Copy link to clipboard

Copied

Sorry it should be:

 

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
kent83121408 AUTHOR LATEST
New Here ,
Sep 02, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more