Highlighted

Mute Sound Button HTML5

Community Beginner ,
Mar 30, 2019

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

927

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

Mute Sound Button HTML5

Community Beginner ,
Mar 30, 2019

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

928

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
Mar 30, 2019 0
Adobe Community Professional ,
Mar 30, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Mar 30, 2019 1
Community Beginner ,
Mar 31, 2019

Copy link to clipboard

Copied

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

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
Reply
Loading...
Mar 31, 2019 1
Adobe Community Professional ,
Mar 31, 2019

Copy link to clipboard

Copied

Excellent!

You're welcome and have a nice weekend!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Mar 31, 2019 0
Community Beginner ,
Apr 16, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Apr 16, 2019 0
Adobe Community Professional ,
Apr 16, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Apr 16, 2019 0
Community Beginner ,
Apr 16, 2019

Copy link to clipboard

Copied

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

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
Reply
Loading...
Apr 16, 2019 0
Adobe Community Professional ,
Apr 17, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Apr 17, 2019 0
Community Beginner ,
Apr 17, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Apr 17, 2019 0