Unmute/Mute Toggle Button HTML5 Canvas, Adobe Animate

Hoping someone can help with this. I can't get it to work to save my life.

I have an animation I did years ago in Flash, and am trying to update it in Adobe Animate adding a mute/unmute toggle button and then export it as HTML/Javascript for use on a website.

There are 4 different layers of sound effects. I need all the sounds to be muted initially, showing the sound icon with a line thru it so that everyone knows its muted... then when clicked, remove the line and unmute all the sounds.

I have searched the discusions here and spent hours trying to figure out how to get this mute toggle button working, but alas, am having no luck at all. The Adobe Animate interface is a lot like the old Flash so I'm finding my way around there, but am really struggling with getting the Actionscript correct and tying it in with the button.

Here is a link to the current .FLA file I'm working with: https://drive.google.com/file/d/1lhNfWgcm7tzs0_f3vqe2lM56EIoTx1vq/view?usp=drive_link

This is the Actionscript I'm currently trying to use with the button...

var root = this;
var muteButton = root.muteButton;
root.toggleMute = function(e)
{
    createjs.Sound.muted = !createjs.Sound.muted;

    if (createjs.Sound.muted)
        root.toggleButton(e.currentTarget, {out:2, over:2, down:2});

    else
        root.toggleButton(e.currentTarget, {out:0, over:1, down:2});
};

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);