Highlighted

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

72

Likes

Translate

Translate

Report

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

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

73

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 28, 2020 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 28, 2020 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 01, 2020 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 02, 2020 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 02, 2020 0