javascript - How to create a only muteunmute button (like youtube) in html - Stack Overflow

admin管理员组

文章数量:1318572

I was creating a website, I put background music, and my problem is I dont know how to create a button(only one) for mute/unmute the sound. I would like to have a mute button that can mute/unmute depending on the situation(if the music is muted then the button should have the image of a Loudspeaker,for hearing the sound, if you press it then you begin listening the music and the image of the button changes and vice versa)

what I have now is this:

<td width=10% valign="top" align="right">
                            <img  src="images/sonidoON.png" onclick="this.src='images/sonidoOFF.png'" width=30% height=7%>
                        </td>

I only need to know how to create that button, not the functions for the background music.

Thank you very much in advance

I was creating a website, I put background music, and my problem is I dont know how to create a button(only one) for mute/unmute the sound. I would like to have a mute button that can mute/unmute depending on the situation(if the music is muted then the button should have the image of a Loudspeaker,for hearing the sound, if you press it then you begin listening the music and the image of the button changes and vice versa)

what I have now is this:

<td width=10% valign="top" align="right">
                            <img  src="images/sonidoON.png" onclick="this.src='images/sonidoOFF.png'" width=30% height=7%>
                        </td>

I only need to know how to create that button, not the functions for the background music.

Thank you very much in advance

• javascript
• html
• playback

Share Improve this question Follow edited Feb 4, 2022 at 10:51 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked Apr 7, 2014 at 16:40 user3507245user3507245 1111 gold badge11 silver badge22 bronze badges 1

• 1 How are you playing the sound? Just a bgsound tag? – Bill the Lizard Commented Apr 7, 2014 at 16:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

HTML

<input type="checkbox" name="un-mute" id="un-mute">
<label for="un-mute" class="unmute">
    <img src="http://upload.wikimedia/wikipedia/mons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon">
</label>
<label for="un-mute" class="mute">
    <img src="http://upload.wikimedia/wikipedia/mons/2/21/Speaker_Icon.svg" alt="Speaker_Icon.svg" title="Unmute/speaker icon">
</label>

CSS

input#un-mute {
  display: none;
}

.unmute img {
  display: none;
}

input#un-mute:checked ~ .unmute img {
  display: initial;
}

input#un-mute:checked ~ .mute img {
  display: none;
}

JavaScript

var un_mute = document.getElementById('un-mute');

un_mute.onclick = function() {
   alert('toggle player here');
};

http://jsfiddle/Ffccv/2/

using :checked pseudo-class selector

You can do this To toggle them

<script>
function toggleSound(img)
{
   img.src= img.src=="images/sonidoON.png" ? "images/sonidoOFF.png" : "images/sonidoON.png";
}
</script>

and onclick="toggleSound(this);" or create img from script and use addEventListener ("click",toggleSound())

<td width=10% valign="top" align="right">
                            <img  src="images/sonidoON.png" onclick="toggleSound(this);" width=30% height=7%>
                        </td>

fiddle demo : http://jsfiddle/K9553/

本文标签： javascriptHow to create a only muteunmute button (like youtube) in htmlStack Overflow