JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div style="bottom:0; position:absolute; height:32px; width:100%;">
		<button id="mute">Mute sound</button>
		<audio id="background_audio"  src="http://www.noiseaddicts.com/samples/2541.mp3" autoplay="autoplay"></audio>
	</div>

JavaScript

$(document).ready(function(){
    var backAudio = $('#background_audio');

    var muted = false;
    
    $('#mute').click(function(){
        var button = $(this);
        if (!muted) {
            button.attr("disabled", "");
            backAudio.animate({volume: 0}, 1000, function () {
                muted = true;
                button.removeAttr("disabled", "");
                button.text("Unmute sound");
            });
        }
        else {
            button.attr("disabled", "");
            backAudio.animate({volume: 1}, 1000, function () {
                muted = false;
                button.removeAttr("disabled", "");
                button.text("Mute sound");
            });
        }
    });
});