Play and Stop sound in HTML5 Canvas

Community Beginner ,
Nov 15, 2016 Nov 15, 2016

Copy link to clipboard

Copied

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

Views

4.5K

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
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Nov 15, 2016 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();

Likes

Translate

Translate
Adobe Community Professional ,
Nov 15, 2016 Nov 15, 2016

Copy link to clipboard

Copied

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

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
community guidelines
Adobe Community Professional ,
Nov 16, 2016 Nov 16, 2016

Copy link to clipboard

Copied

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.

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
community guidelines
Community Beginner ,
Aug 07, 2020 Aug 07, 2020

Copy link to clipboard

Copied

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

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
community guidelines
Community Beginner ,
Nov 19, 2020 Nov 19, 2020

Copy link to clipboard

Copied

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

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
community guidelines
Community Beginner ,
Nov 19, 2020 Nov 19, 2020

Copy link to clipboard

Copied

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

 

 

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
community guidelines
Adobe Community Professional ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

Hi.

 

Here is:

https://bit.ly/3lQ3S5x

 

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

 

Regards,

JC

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
community guidelines
Community Beginner ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

Thank you very much indeed JoãoCésar

You the best!

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
community guidelines
Adobe Community Professional ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

You're welcome!

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
community guidelines
Community Beginner ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

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.

+)

 

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
community guidelines
Adobe Community Professional ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

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.

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
community guidelines
Community Beginner ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

Is it possible to pause the sound? 

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
community guidelines
Adobe Community Professional ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

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

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
community guidelines
Community Beginner ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

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?

 

 

 

 

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
community guidelines
Adobe Community Professional ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

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

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
community guidelines
Community Beginner ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

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

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
community guidelines
Adobe Community Professional ,
Mar 24, 2021 Mar 24, 2021

Copy link to clipboard

Copied

Hi!

 

Sorry for the delay.

 

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

 

Regards,

JC

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
community guidelines
Community Beginner ,
Mar 24, 2021 Mar 24, 2021

Copy link to clipboard

Copied

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

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
community guidelines
Adobe Community Professional ,
Mar 24, 2021 Mar 24, 2021

Copy link to clipboard

Copied

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?

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
community guidelines
Community Beginner ,
Mar 24, 2021 Mar 24, 2021

Copy link to clipboard

Copied

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

-

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
community guidelines
Adobe Community Professional ,
Mar 24, 2021 Mar 24, 2021

Copy link to clipboard

Copied

Alright. Now I see the link.

 

Thanks.

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
community guidelines
Adobe Community Professional ,
Mar 24, 2021 Mar 24, 2021

Copy link to clipboard

Copied

LATEST

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

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
community guidelines
Community Beginner ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

Where do I put this code:

 

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

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

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
community guidelines