mute and unmute button toggle html5 audio

Question

I've understood how to mute an <audio> sound object by putting this code :

<a href="#" onclick="document.getElementById('ambiance').muted = true; return false">
    mute sound
</a>

Now I'm searching how to mute/unmute my sound using the same button with the option to toggle it ?

Can anyone give me directions?

Answer 1

var audioElm = document.getElementById('ambiance'); audioElm.muted = !audioElm.muted;

Answer 2

Try this:

 .unmute { background-image: url(http://franriavilla.in/images/unmute.png); background-size: cover; width: 35px; height: 30px; cursor: pointer; } .mute { background-image: url(http://franriavilla.in/images/mute.png); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <audio id="track" autoplay="autoplay" loop="loop"> <source src="audio/ThemePackNet.mp3" type="audio/ogg" /> </audio> <div class='unmute' onclick="document.getElementById('track').muted = !document.getElementById('track').muted;$(this).toggleClass('mute')"></div>