Mute and Unmute HTML5 Canvas Click Event in Adobe Animate CC

[Thad Zeitlin]

Hi,

I am trying to get two buttons to perform two different functions. I have been searching the web and YouTube all day with no luck.

Button 1 is to mute/stop a .mp3 (looped) and Button 2 is to unmute/stop the aforementioned .mp3

Nothing I have tried has worked. This was the most promising solution I could find but I could not get it to work:

this.SoundOn.addEventListener("click", silence.bind(this));

function silence()

{

  if(!mcSndVar) {

  sound_1.volume = 0;

  mcSndVar = true; }

  else {

  sound_1.volume = 1;

  mcSndVar = false;

}

}

Any ideas?

[ClayUUID]

I can't tell if you're using "mute" and "stop" interchangeably (they aren't), or if you mean you want to mute and stop a sound, which seems a bit redundant.

[Nicktendo28]

Give this tutorial a try.

Adobe Animate CC: Audio, Buttons, Actions - YouTube

[albertd9194959]

Hi Thad,

In addition to the above: For more advanced sound manipulation within canvas you need to use the soundJS class.

SoundJS v1.0.0 API Documentation : SoundJS

In its very basic form, it would look like:

createjs.Sound.registerSound("sounds/button1Sound.mp3", "buttonOneSound");

var soundOne = createjs.Sound.createInstance("buttonOneSound");

createjs.Sound.registerSound("sounds/button2Sound.mp3", "buttonTwoSound");

var soundTwo = createjs.Sound.createInstance("buttonTwoSound");

You can then control, stop, pause, play, seek volume, loop etc etc.

soundOne.play();

soundTwo.stop();

OR use the following if you dont want to lose the current sound play location.

soundOne.paused = false;

soundTwo.paused = true;

Regards,

[Thad Zeitlin]

I will give this a try.

[Thad Zeitlin]

I am not sure where I am going wrong . . . I still cannot get it to work. I have made a two-button button (on and off). It starts as "on" with music playing, clicking "on" switches it to "off" and is supposed to pause or stop the looped mp3, thereby clicking "off" switches the button to "on" and is supposed to unpause the mp3.

The music plays automatically and the button switches correctly, but the audio remains unaffected.

Here is what I tried:

this.stop();

this.SoundOn.visible = true;

this.SoundOff.visible = false;

this.SoundOn.addEventListener("click", ClickToHideOn.bind(this));

this.SoundOn.addEventListener("click", ClickToShowOn.bind(this));

this.SoundOff.addEventListener("click", ClickToHideOff.bind(this));

this.SoundOff.addEventListener("click", ClickToShowOff.bind(this));

this.SoundOn.addEventListener("click", silence.bind(this));

this.SoundOff.addEventListener("click", serenade.bind(this));

createjs.Sound.registerSound("PeterGunderMovement1.mp3", "SoundOn");

var SoundOn = createjs.Sound.createInstance("AudioOn");

createjs.Sound.registerSound("PeterGunderMovement1.mp3", "SoundOff");

var SoundOff = createjs.Sound.createInstance("AudioOff");

function ClickToHideOn()

{

  this.SoundOn.visible = false;

}

function ClickToShowOn()

{

  this.SoundOff.visible = true;

}

function ClickToHideOff()

{

  this.SoundOff.visible = false;

}

function ClickToShowOff()

{

  this.SoundOn.visible = true;

}

function silence()

{

  this.SoundOn.paused=true;

}

function serenade()

{

  this.SoundOff.paused=false;

}

[albertd9194959]

Hi Thad,

Get rid of "this." when referencing the sound variable.

You will also need to make sure you include a "fileload" event listener for your audio files if you are running this anywhere but locally.

function silence()

{

SoundOn.paused = true;

}

function serenade()

{

SoundOn.play();

SoundOff.paused = false;

}

[Thad Zeitlin]

Forgive my lack of skill and understanding, I am new to this, can you explain where I am going wrong?

This is what I tried:

this.stop();

this.SoundOn.visible = true;

this.SoundOff.visible = false;

this.SoundOn.addEventListener("click", ClickToHideOn.bind(this));

this.SoundOn.addEventListener("click", ClickToShowOn.bind(this));

this.SoundOff.addEventListener("click", ClickToHideOff.bind(this));

this.SoundOff.addEventListener("click", ClickToShowOff.bind(this));

this.SoundOn.addEventListener("click", silence.bind(this));

this.SoundOff.addEventListener("click", serenade.bind(this));

this.SoundOff.addEventListener("click", loadAudio.bind(this));

createjs.Sound.on("fileload", this.loadAudio, this);

createjs.Sound.registerSound("sounds/PeterGunderMovement1.mp3", "SoundOn");

var SoundOn = createjs.Sound.createInstance("SoundOn");

createjs.Sound.registerSound("sounds/PeterGunderMovement1.mp3", "SoundOff");

var SoundOff = createjs.Sound.createInstance("SoundOff");

function loadAudio(event) {

  var instance = createjs.Sound.play("sound");

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

  instance.volume = 0.5;

}

function ClickToHideOn()

{

  this.SoundOn.visible = false;

}

function ClickToShowOn()

{

  this.SoundOff.visible = true;

}

function ClickToHideOff()

{

  this.SoundOff.visible = false;

}

function ClickToShowOff()

{

  this.SoundOn.visible = true;

}

function silence()

{

  SoundOn.paused = true;

}

function serenade()

{

  SoundOn.play();

  SoundOff.paused = false;

}

[albertd9194959 · Accepted solution]

Hi Thad, your getting there.... you need to make sure you don't have any sound in your timeline layers.

You only need 1 event listener per button ....you only need to register one sound, as you pause, play that particular sound, unless you have a specific SoundOff sound....

this.stop();

// Register all our sounds here, as well as the fileload event.

createjs.Sound.registerSound("sounds/PeterGunderMovement1.mp3", "SoundOn");

createjs.Sound.addEventListener("fileload", handleFileLoad);

// Create all our variables here to be called later.

var SoundOn = createjs.Sound.createInstance("SoundOn");

// Set the button visibility states.

this.SoundOn.visible = true;

this.SoundOff.visible = false;

// Add the even listeners for our buttons.

this.SoundOn.addEventListener("click", silence.bind(this));

this.SoundOff.addEventListener("click", serenade.bind(this));

function handleFileLoad(event)

{

// Once sound has loaded, start playing audio, you can also use this.play(); if you have animations.

console.log("sound loaded");

createjs.Sound.removeEventListener("fileload", handleFileLoad);

SoundOn.play();

SoundOff.paused = false;

}

function silence()

{

// the button called SoundOff will trigger this

console.log("Button Pause Sound");

this.SoundOn.visible = false;

this.SoundOff.visible = true;

SoundOn.paused = true;

}

function serenade()

{

// the button called SoundOnwill trigger this

console.log("Button Play Sound");

this.SoundOn.visible = true;

this.SoundOff.visible = false;

SoundOn.play();

SoundOff.paused = false;

}

[Thad Zeitlin]

I see how the functions can be combined to shorten the script. That's very logical.

Although the sound file was not in my timeline, I had to remove the sound file from my library - that fixed all my problems. Thank you.

Here is my HTML5 code for those who are wondering:

this.stop();

// Register and load the sound file

createjs.Sound.registerSound("sounds/PeterGunderMovement1.mp3", "SoundOn");

createjs.Sound.addEventListener("fileload", handleFileLoad);

// Create variable

var SoundOn = createjs.Sound.createInstance("SoundOn");

// Default button visibility states

this.SoundOn.visible = true;

this.SoundOff.visible = false;

// Listen for events

this.SoundOn.addEventListener("click", silence.bind(this));

this.SoundOff.addEventListener("click", serenade.bind(this));

// Play the sound file

function handleFileLoad(event)

{

console.log("sound loaded");

createjs.Sound.removeEventListener("fileload", handleFileLoad);

SoundOn.play();

SoundOff.paused = false;

}

// Pause the sound file

function silence()

{

console.log("Button Pause Sound");

this.SoundOn.visible = false;

this.SoundOff.visible = true;

SoundOn.paused = true;

}

// Resume playing the sound file

function serenade()

{

console.log("Button Play Sound");

this.SoundOn.visible = true;

this.SoundOff.visible = false;

SoundOn.play();

SoundOff.paused = false;

}

[albertd9194959]

Awesome, glad you got it working!

[ClayUUID]

https://forums.adobe.com/people/Thad+Zeitlin  wrote

// Register and load the sound file

createjs.Sound.registerSound("sounds/PeterGunderMovement1.mp3", "SoundOn");

createjs.Sound.addEventListener("fileload", handleFileLoad);

This is a race condition begging to happen. You're telling it to load the sound, then adding the event listener. What if the asset is cached and finishes loading before execution reaches the next line? Your application will hang because it's missed the load event.

You need to reverse the order of those two lines, just like the example code on the SoundJS docs page:

SoundJS v1.0.0 API Documentation : Sound