Canvass: How to listen for the end of a sound event

Participant ,
Oct 31, 2021 Oct 31, 2021

Copy link to clipboard

Copied

Hi. I finally got the first part of this working. 

I am trying to check for end of a sound.

However, all the examples I see don't seem to work. 

 

The console says I can't use .on

 

 

this.btn_play.addEventListener("click", buttonClicked.bind(this));
function buttonClicked () {

var instance = createjs.Sound.play("itemName"); 
//instance.on("complete", this.handleComplete, this);

if (itemName=="monkey") {
monkeyClickSound.play("monkeySound");
completeMonkeySound = monkeyClickSound.play("monkeySound");
completeMonkeySound.on("complete", this.handleComplete, this);
}

if (itemName=="froggy") {
froggyClickSound.play("froggySound");
}


this.genie.visible=true;
this.genie_static.visible=false;

//monkeyClickSound.on("complete", handleComplete, null, true);
}

function handleComplete() {
console.log("sound complete works");
this.genie.visible=false;
this.genie_static.visible=true;
}

 

 

Views

47

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 , Oct 31, 2021 Oct 31, 2021
Hi. This approach should work: function soundButtonHandler() { var sound = createjs.Sound.play("LibSoundLinkage", { volume: 0.2 }); sound.on("complete", soundCompleteHandler, this); } function soundCompleteHandler() { alert("Sound complete."); } this.soundButton.on("click", soundButtonHandler, this); Please notice that the code of your first commented line should be: instance.on("complete", handleComplete, this); And not: // handleComplete is a function and not a method so the 'this' ...

Likes

Translate

Translate
Adobe Community Professional ,
Oct 31, 2021 Oct 31, 2021

Copy link to clipboard

Copied

Hi.

 

This approach should work:

function soundButtonHandler()
{
	var sound = createjs.Sound.play("LibSoundLinkage", { volume: 0.2 });
	sound.on("complete", soundCompleteHandler, this);
}

function soundCompleteHandler()
{
	alert("Sound complete.");
}

this.soundButton.on("click", soundButtonHandler, this);

 

Please notice that the code of your first commented line should be:

instance.on("complete", handleComplete, this);

 

And not:

// handleComplete is a function and not a method so the 'this' keyword is not used
instance.on("complete", this.handleComplete, this);

 

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
Participant ,
Oct 31, 2021 Oct 31, 2021

Copy link to clipboard

Copied

Hi thank you for answering so quickly and on a Sunday.

 

I have added your code but I don't know how to connect my first parts of code to yours. This is how I have things at the moment. I don't understand libSoundLinkage very well.

 

//Play sounds
var preload = new createjs.LoadQueue();
preload.addEventListener("fileload", handleFileComplete);
preload.loadFile ("sounds/monkey.mp3", "itemSound");

//Register sounds
function handleFileComplete (event) {
	createjs.Sound.registerSound("sounds/monkey.mp3", "monkeySound");
	createjs.Sound.registerSound("sounds/froggy.mp3", "froggySound");
	
//Prepare sounds
	monkeyClickSound = createjs.Sound.play("monkeySound");
	froggyClickSound = createjs.Sound.play("froggySound");
}

this.soundButton.on("click", soundButtonHandler, this);

function soundButtonHandler()
{
	var sound = createjs.Sound.play("LibSoundLinkage", { volume: 0.2 });
	sound.on("complete", soundCompleteHandler, this);
}

function soundCompleteHandler()
{
	alert("Sound complete.");
	this.genie.visible=false;
	this.genie_static.visible=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
Participant ,
Oct 31, 2021 Oct 31, 2021

Copy link to clipboard

Copied

Your answer was great. I changed one line of code and it all worked so well.

 

//var sound = createjs.Sound.play("LibSoundLinkage", { volume: 0.2 });
var sound = createjs.Sound.play(itemName);

 

itemName being froggy, monkey etc... which I get from the drag target

itemName = evt.currentTarget.name;

 

BUT I'm very interested to know what 

"LibSoundLinkage"

the following means, just to see if I am doing things properly. I mean it works but it may be a bad way of doing things. 

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 ,
Oct 31, 2021 Oct 31, 2021

Copy link to clipboard

Copied

Great!

 

It's a wise approach to use the current target name as the linkage.

 

"LibSoundLinkage" is just a generic suggestion for linkage names in the Library. It's not something special. Don't worry.

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
Participant ,
Oct 31, 2021 Oct 31, 2021

Copy link to clipboard

Copied

LATEST

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