<style>
.button {
    background: none;
    cursor: auto;
    border-color: none;
    font-size: 16px;
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition:
        color 0.1s,
        background 0.1s;
    height: max-content;
    width: max-content;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
    gap: 0.5rem;
}

button.secondary,
.button.secondary {
 border-style: none;
     border-width: 0px;
     border-color: none;
}

button:hover,
.button:hover {
  border-style: none;
     border-width: 0px;
     border-color: none;
}

button.secondary:hover,
.button.secondary:hover {
 border-style: none;
     border-width: 0px;
     border-color: none;
}

button.border,
.button.border {
     border-style: none;
     border-width: 0px;
     border-color: none;
     box-shadow: inset 0 0 0 0px var(--background-surface2a);
}

button.border:hover,
.button.border:hover {
   border:none;
    background: none;
    box-shadow: inset 0 0 0 0px var(--background-surface2a);
}


button.tertiary,
.button.tertiary {
    background: none;
}

button.tertiary:hover,
.button.tertiary:hover {
    background: none;
}

#audio-button{
    transition: all 1s ease-in-out 0s;
}

#audio-button:hover{
    transform: rotate(11deg);
    filter: blur(0px);
}

}

</style>
<div>
    <button class="round border tooltip-wrapper" id="audio-button">
        <!-- icons from https://primer.style/foundations/icons/ - MIT licensed by GitHub -->
        <img id="audio-muted" src="https://i.postimg.cc/ncxzhyKd/Untitled719-20231114102130.png" height="25px" width="auto"><path d="M8 2.75v10.5a.751.751 0 0 1-1.238.57L3.473 11H1.75A1.75 1.75 0 0 1 0 9.25v-2.5C0 5.784.784 5 1.75 5h1.722l3.29-2.82A.75.75 0 0 1 8 2.75Zm3.28 2.47L13 6.94l1.72-1.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L14.06 8l1.72 1.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L13 9.06l-1.72 1.72a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L11.94 8l-1.72-1.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-7.042 1.1a.752.752 0 0 1-.488.18h-2a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h2c.179 0 .352.064.488.18L6.5 11.62V4.38Z"></path>

<img id="audio-unmuted" src="https://i.postimg.cc/ncxzhyKd/Untitled719-20231114102130.png" height="80px" width="auto" style="display: none;" ><path d="M7.563 2.069A.75.75 0 0 1 8 2.75v10.5a.751.751 0 0 1-1.238.57L3.472 11H1.75A1.75 1.75 0 0 1 0 9.25v-2.5C0 5.784.784 5 1.75 5h1.723l3.289-2.82a.75.75 0 0 1 .801-.111ZM6.5 4.38 4.238 6.319a.748.748 0 0 1-.488.181h-2a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h2c.179 0 .352.064.488.18L6.5 11.62Zm6.096-2.038a.75.75 0 0 1 1.06 0 8 8 0 0 1 0 11.314.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042 6.5 6.5 0 0 0 0-9.193.75.75 0 0 1 0-1.06Zm-1.06 2.121-.001.001a5 5 0 0 1 0 7.07.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734 3.5 3.5 0 0 0 0-4.95.75.75 0 1 1 1.061-1.061Z"></path>
        </div>
    </button>

    <script>
        // set audio
        const AudioURL = "https://dl.dropbox.com/scl/fi/y0g3mff45v7azmw1jfnyn/They-Might-Be-Giants-Istanbul-Not-Constantinople.mp3?rlkey=hf2dc8476akmuwikitwup5lfd&dl=0";

        // state
        let Playing = false;
        const audio = new Audio(AudioURL);

        // get icons
        const Icons = {
            Muted: Builder.Page.Element.querySelector("#audio-muted"),
            Unmuted: Builder.Page.Element.querySelector("#audio-unmuted"),
        };

        // ...
        Builder.Page.Element.querySelector("#audio-button").addEventListener("click", () => {
            Playing = !Playing; // swap playing state

            // toggle icons
            if (Playing) {
                Icons.Muted.style.display = "none";
                Icons.Unmuted.style.display = "block";
            } else {
                Icons.Muted.style.display = "block";
                Icons.Unmuted.style.display = "none";
            }

            // play/stop audio
            if (Playing) audio.play();
            else audio.pause();
        });
    </script>
</div>