Play and Stop sound in HTML5 Canvas

Report · Nov 15, 2016

Hi -
I'm having trouble figuring out the correct steps to control sound in the Actions panel.

Client wants music to start after hitting a "Play" button.
They want the music to continue playing until the viewer hits a "Replay" button.

Basically, what I need to do is figure out how to pause the previous instance of the music so it doesn't play over itself when the video replays.

.FLA attached:

valtoukatly.com/BeaconSt_WIP/beaconst.fla 2.zip

Report · Nov 15, 2016

Your example file doesn't include any sound.

The simplest solution would be to include this line in your replay code, before the this.gotoAndPlay(2) line:

createjs.Sound.stop();

Report · Nov 16, 2016

phornschemeier wrote:
Client wants music to start after hitting a "Play" button.
They want the music to continue playing until the viewer hits a "Replay" button.

This sounds like you're saying there should only be music the first time, but not the second or more times.

Report · Aug 07, 2020

Thank you so much Colin_Holgate!!! Stopping sound in html5 canvas worked. Here is what I used

this.NextButton1.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()
{
this.gotoAndStop("two");
createjs.Sound.stop();
}

Report · Nov 19, 2020

Can someone please Share their .fla as i still cannot ge thtis to work.

Report · Nov 19, 2020

Can someone please check my .fla and tell me how to stop/mute the sound onclick on the square button?

https://files.fm/u/q947hds2g

Report · Nov 20, 2020

Hi.

Here is:

https://bit.ly/3lQ3S5x

Please notice that I assigned a linkage name ("BGM") to your sound in the Library.

Regards,

JC

Report · Nov 20, 2020

Thank you very much indeed JoãoCésar

You the best!

Report · Nov 20, 2020

You're welcome!

Report · Nov 20, 2020

So that code you wrote was fresh and unique to the code in the thread.

I still dont really understand what you did but it works.!

Can you maybe recommend a beginners tutorial that could maybe help me understand what you wrote?

Book or Video?

Thank you one again!

Took me a whole day to try that and i stilll failed. fml.

+)

Report · Nov 20, 2020

Here are some suggestions for learning materials:

- The official help has lot of articles, tutorials, and examples: https://helpx.adobe.com/support/animate.html;

- Animate CC also ships with great learning content. Just go to the start screen and select the LEARN option in the top-left corner of the screen;

- LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.linkedin.com/learning/;

- Pluralsight also have some great video courses: https://www.pluralsight.com/;

- General tips and tricks in the comment that starts with "Excellent!";

- Official demos developed by the CreateJS team: https://github.com/CreateJS/AdobeAnimateDemo;

- Official Flappy Bird clone tutorial: https://theblog.adobe.com/building-a-html5-flappy-bird-game-clone-with-adobe-animate-cc/ ;
- Adobe Animate's official YouTube channel;

- Martin Melendez's YouTube channel;

- My repo on GitHub that contains the source codes and files of some games and other stuff;

- I also have a YouTube channel that you may find useful.

Report · Nov 20, 2020

Is it possible to pause the sound?

Report · Nov 20, 2020

Yes, it is.

I've updated the link with a pause button. I'll leave the full code here in case someone else needs it.

var _this = this;

_this.play_btn.on('click', function(){
	
	if (_this.bgm)
		_this.bgm.play();
	else
		_this.bgm = createjs.Sound.play("BGM");
});

this.stop_btn.on("click", function()
{
	if (_this.bgm)
	{
		_this.bgm.stop();
		_this.bgm = null;
	}		
});

this.pause_btn.on("click", function()
{
	if (_this.bgm)
		_this.bgm.paused = true;		
});

Report · Mar 22, 2021

Hello João!

Can the stop button stop all sounds?

https://www.save-sthlm.se/play/

The problem I am having is that if more that one play button

is clicked the sounds all play together. I need the ''stop button''

to stop all sounds.

Is that possible?

Report · Mar 22, 2021

Hi.

The easiest way is to use the static stop method from SoundJS:

createjs.Sound.stop();

But if there are some sounds that must continue playing then stop each created sound individually. Like this:

var sound0 = createjs.Sound.play("LibraryLinkage0");
var sound1 = createjs.Sound.play("LibraryLinkage1");
var sound2 = createjs.Sound.play("LibraryLinkage2");

this.yourStopButton.on("click", function()
{
	sound0.stop();
	sound1.stop();
	sound2.stop();
});

Please let me know if you have any further questions.

Regards,

JC

Report · Mar 22, 2021

Hi JC,

Thanks for your reply.

Each sound is in an individual HTML5 file.

Those three files are all in the same page but in different containers and with their own html.

So basically if I press play on sound 1 or 2 or 3 then only that sound will play.

Is that possible?

Attached is .fla

Thank you so much!!

Report · Mar 24, 2021

Hi!

Sorry for the delay.

The FLA isn't attached. Can you verify this? Alternatively, you can upload your file to Dropbox or WeTransfer, for example, and paste the sharing link here.

Regards,

JC

Report · Mar 24, 2021

Hi JC,

I'm really greatful you can help me with this.

Here is the fla and sound file.

So basically i have 3 different .fla banners (converted to html5) files that are in the same html web page.

If I press play on another fla the sound coming from the other html5 banner must stop.

https://www.save-sthlm.se/play/

I hope that makes sence?

Thank you so much!

SR

Report · Mar 24, 2021

Hi again!

Thanks.

The FLA isn't showing up again. I think the forum doesn't allow FLA files...

Are you able to upload it to somewhere else?

Report · Mar 24, 2021

https://wetransfer.com/downloads/b5f371a6f291c2f930afaa5df5b85d5e20210324140441/f6c66eb5d8a57c124af7...

Hi JC,

I'm really grateful you can help me with this.

Here is the fla and sound file.

So basically i have 3 different .fla banners (converted to html5) files
that are in the same html web page. If I press play on another fla the
sound coming from the other html5 banner must stop.

https://www.save-sthlm.se/play/

I hope that makes sense?

Thank you so much!

SR

-

Report · Mar 24, 2021

Alright. Now I see the link.

Thanks.

Report · Mar 24, 2021

Hi again.

Maybe the playback logic is not exactly what you're looking for but I think the example may be able to help you to get started.

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Communication Between Iframes</title>
    <link rel="stylesheet" href="main.css">
    <style>
        body
        {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
            height: 100%;
            min-height: 100vh;
            padding: 0;
            margin: 0;
            background-color: rgb(29, 29, 29);
        }
    </style>
</head>
<body>
    <iframe class="techno" width="1124" height="973" src="techno.html" frameborder="0"></iframe>
    <iframe class="techno" width="1124" height="973" src="techno.html" frameborder="0"></iframe>
    <iframe class="techno" width="1124" height="973" src="techno.html" frameborder="0"></iframe>

    <script>
        function playback(method)
        {
            var technoPlayers = document.getElementsByClassName("techno");
            var techno;

            for (techno of technoPlayers)
                techno.contentWindow.exportRoot[method]();
        }

        window.document.addEventListener("pauseallsounds", function(){ playback("pauseSound"); }, false);
        window.document.addEventListener("stopallsounds", function(){ playback("stopSound"); }, false);
    </script>
</body>
</html>

JS / JavaScript code:

var root = this;

root.pauseSound = function()
{
	if (root.bgm)
		root.bgm.paused = true;
};

root.playSound = function(linkage)
{
	if (root.bgm)
	{
		if (root.bgm.paused)
			root.bgm.paused = false;
		else
			root.sendEvent("stopallsounds");
	}
	else
	{
		root.sendEvent("stopallsounds");
		root.bgm = createjs.Sound.play(linkage);
	}		
};

root.stopSound = function()
{
	if (root.bgm)
	{
		root.bgm.stop();
		root.bgm = null;
	}
};

root.sendEvent = function(name)
{
	var event = new CustomEvent(name);
	window.parent.document.dispatchEvent(event);
};

root.pause_btn.on("click", function(){ root.sendEvent("pauseallsounds") });
root.play_btn.on("click", function(){ root.playSound("BGM") });
root.stop_btn.on("click", function(){ root.sendEvent("stopallsounds") });
root.stop();

Code / JS / FLA / files / source:

https://bit.ly/3d6rDTK

I hope this helps.

Regards,

JC

Report · Jun 15, 2023

You are an absolute lifesaver! I have searched and searched and found solutions that only work with actionscript and not HTML5, or that jsut don't work period. This was the simplest and easiest way and, as someone new to the program, I am eternally grateful for this solution! Thank you!

Report · Jun 16, 2023

Hi!

Awesome! Glad to help!

Report · Nov 20, 2020

Where do I put this code:

this.NextButton1.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()
{
this.gotoAndStop("two");
createjs.Sound.stop();
}

Play and Stop sound in HTML5 Canvas

1 Correct answer