Mute Sound Button HTML5

[BobobobCat]

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?

[JoãoCésar · Accepted solution]

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

[BobobobCat]

Thank you JC. I wonderfully clear example. Much appreciated.

[JoãoCésar]

Excellent!

You're welcome and have a nice weekend!

[BobobobCat]

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ésar]

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

[BobobobCat]

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ésar]

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

[BobobobCat]

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.