Known Participant

Answered

Mute Sound Button HTML5

Forum|Forum|7 years ago
March 30, 2019
3 replies
3613 views

Hi. Could someone simply explain how to create a mute sound button (ideally start/stop) in Animate html5 canvas please?

Do I place the audio on the timeline?

This topic has been closed for replies.

Correct answer JoãoCésar17023019

Hi.

The easiest way is to use the static propety muted of SoundJS. In this way, you can mute all sounds, no matter how you brought them (placing in the timeline, loading from an external source...).

Then you change this property with a button press.

JavaScript code:

var root = this; // here we store a reference to the main timeline
var muteButton = root.muteButton; // here we store a reference to the mute/unmute button
root.toggleMute = function(e)
{
    createjs.Sound.muted = !createjs.Sound.muted; // here we invert the sound state (muted/unmuted)
   
    if (createjs.Sound.muted)
        root.toggleButton(e.currentTarget, {out:2, over:2, down:2}); // set the same frame number to the main button states (out, over, and down)
    else
        root.toggleButton(e.currentTarget, {out:0, over:1, down:2}); // reset the button frames
};
// convenience/utility method to toggle default button symbols instances on and off
root.toggleButton = function(button, frames)
{
    var listeners = button._listeners;
       
    if (!listeners)
        return;
   
    for (var key in listeners)
    {
        var listener = listeners[key][0];
               
        if (typeof(listener.outLabel) !== 'undefined')
            listener.outLabel = frames.out;
       
        if (typeof(listener.overLabel) !== 'undefined')
            listener.overLabel = frames.over;
       
        if (typeof(listener.downLabel) !== 'undefined')
            listener.downLabel = frames.down;
    }
   
    button.gotoAndStop(frames.out);
};
muteButton.on("mousedown", root.toggleMute); // mouse down listener added to the mute/unmute button

FLA download:

animate_cc_html5_canvas_mute_all_sounds.zip - Google Drive

Regards,

JC

B

BobobobCatAuthor

Known Participant

Hi JC

Okay I'm doing something wrong! My Replay button is imaginatively named button_4. I have placed the JS on the end frame where the code to replay and close is. I assume this is incorrect? Thanks

JoãoCésar17023019

Community Expert

Hi.

My answer was incomplete.

I didn't include the this keywork before my generic button name. It should be:

if (!this.yourReplayButton.hasEventListener("click")) // this is a good practice to avoid adding multiple event listeners to the same button 
{ 
    this.yourReplayButton.on("click", function(e) 
    { 
          createjs.Sound.stop(); // stop all audio (global stop) 
          this.gotoAndStop(0); 
    }, this); 
}

Please try this and see if it works (this.button_4).

Regards,

JC

B

BobobobCatAuthor

Known Participant

Hi JC,

That worked thank you. However I now have another problem! So I have an intro animation which runs along the timeline and stops. The next button take the user to the next frame where a video plays. There is another next button which takes the user to the next frame where a second video plays. On this final frame is the replay button. When I run the animation, it has started to jump frames so you don't always see both videos. This was working fine, however I have experienced this previously when I didn't have sound added. Any ideas? I know it would be best if I could post my files. Will try and upload somewhere if this helps? Thanks for your help.

B

BobobobCatAuthor

Known Participant

Hi Joao

I need your help again please?

The on/off sound button is great...however, I am using the timeline for my animation and have a replay button at the end of my animation. This means that when I hit replay and return to frame 1, the sound starts playing again on top of the previous. Any ideas how I can stop this?

Thank you.

JoãoCésar17023019

Community Expert

Hi.

Sure. My pleasure.

Call createjs.Sound.stop() as soon as the user clicks the button but before changing frames. For example:

if (!yourReplayButton.hasEventListener("click")) // this is a good practice to avoid adding multiple event listeners to the same button
{
    yourReplayButton.on("click", function(e)
    {
          createjs.Sound.stop(); // stop all audio (global stop)
          this.gotoAndStop(0);
    }, this);
}

Please let me know if this works.

Regards,

JC

JoãoCésar17023019

Correct answer

Community Expert

Hi.

The easiest way is to use the static propety muted of SoundJS. In this way, you can mute all sounds, no matter how you brought them (placing in the timeline, loading from an external source...).

Then you change this property with a button press.

JavaScript code:

var root = this; // here we store a reference to the main timeline
var muteButton = root.muteButton; // here we store a reference to the mute/unmute button
root.toggleMute = function(e)
{
    createjs.Sound.muted = !createjs.Sound.muted; // here we invert the sound state (muted/unmuted)
   
    if (createjs.Sound.muted)
        root.toggleButton(e.currentTarget, {out:2, over:2, down:2}); // set the same frame number to the main button states (out, over, and down)
    else
        root.toggleButton(e.currentTarget, {out:0, over:1, down:2}); // reset the button frames
};
// convenience/utility method to toggle default button symbols instances on and off
root.toggleButton = function(button, frames)
{
    var listeners = button._listeners;
       
    if (!listeners)
        return;
   
    for (var key in listeners)
    {
        var listener = listeners[key][0];
               
        if (typeof(listener.outLabel) !== 'undefined')
            listener.outLabel = frames.out;
       
        if (typeof(listener.overLabel) !== 'undefined')
            listener.overLabel = frames.over;
       
        if (typeof(listener.downLabel) !== 'undefined')
            listener.downLabel = frames.down;
    }
   
    button.gotoAndStop(frames.out);
};
muteButton.on("mousedown", root.toggleMute); // mouse down listener added to the mute/unmute button