Play and Stop sound in HTML5 Canvas

[phornschemeier]

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

[Colin Holgate · Accepted solution]

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

[ClayUUID]

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.

[joyceb92663589]

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

[Digital-sthlm.se]

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

[Digital-sthlm.se]

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

[JoãoCésar]

Hi.

Here is:

https://bit.ly/3lQ3S5x

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

Regards,

JC

[Digital-sthlm.se]

Thank you very much indeed JoãoCésar

You the best!

[JoãoCésar]

You're welcome!

[Digital-sthlm.se]

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.

+)

[JoãoCésar]

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.

[Digital-sthlm.se]

Is it possible to pause the sound? 

[JoãoCésar]

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

[Digital-sthlm.se]

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?

[JoãoCésar]

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

[Digital-sthlm.se]

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!!

[JoãoCésar]

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

[Digital-sthlm.se]

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

[JoãoCésar]

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?

[Digital-sthlm.se]

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

-

[JoãoCésar]

Alright. Now I see the link.

Thanks.

[JoãoCésar]

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

[a_blip_]

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!

[JoãoCésar]

Hi!

Awesome! Glad to help!

[Digital-sthlm.se]

Where do I put this code:

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

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