(Javascript) How can I make a mute button to mute my background music on click?

Question

Right now on my site, (http://www.thehistoryofhiphop.net), I am trying to make my mute button functional. I want it to mute the background music that I have playing. How can I make it mute on click of the image? Here's my html for the music:

<embed src="no_joke.mp3" loop="true" autostart="true" hidden="true" id="music"/>

why not just mute the video's sound in some video editor, it's easy like 1,2,3 — num8er, Oct 04 '16 at 22:32
@num8er The OP probably wants the user to be able to control the sound with a button. — Cave Johnson, Oct 04 '16 at 22:33
Show the code that you are using to play the background music and anything you tried. — Cave Johnson, Oct 04 '16 at 22:37
@Andrew Just updated showing the code. Would love some help, thanks. — user3925841, Oct 04 '16 at 22:40
According to this question: http://stackoverflow.com/questions/6848973/custom-mute-button-for-audio-embedding. There is no way to mute `` elements. You should probably use ` — Cave Johnson, Oct 04 '16 at 22:47
@user3925841 Oh, num8er just posted a good answer on how to do it. — Cave Johnson, Oct 04 '16 at 22:49

score 1 · Answer 1 · answered Oct 04 '16 at 22:48

embed tag has no muted attribute, so use audio tag.

and take this code:

<script>
function toggleSound() {
  var elements = document.getElementsByTagName('audio');
  for(var e = 0; e < elements.length; elements[e].muted = !elements[e].muted, e++);
}
</script>

<button onclick="toggleSound()">TOGGLE SOUND</button>

<audio 
       src="http://www.thehistoryofhiphop.net/no_joke.mp3" 
       preload="auto" 
       loop="true" 
       autoplay="true" 
       id="music">

(Javascript) How can I make a mute button to mute my background music on click?

1 Answers1