如何在html中创建唯一的静音/取消静音按钮(如youtube）

How to create a only mute/unmute button (like youtube) in html

本文关键字：取消 按钮 youtube html 创建 唯一      更新时间：2023-09-26

我在创建一个网站，我放了背景音乐，我的问题是我不知道如何创建一个按钮（只有一个）来静音/取消静音。我想要一个静音按钮，可以根据情况静音/取消静音（如果音乐被静音，那么按钮应该有扬声器的图像，以便听到声音，如果你按下它，那么你就开始听音乐，按钮的图像会改变，反之亦然）

我现在拥有的是：

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

我只需要知道如何创建按钮，而不需要知道背景音乐的功能。

提前非常感谢

HTML

<input type="checkbox" name="un-mute" id="un-mute">
<label for="un-mute" class="unmute">
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon">
</label>
<label for="un-mute" class="mute">
    <img src="http://upload.wikimedia.org/wikipedia/commons/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.net/Ffccv/2/

使用：已检查的伪类选择器

您可以这样做来切换它们

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

和onclick="toggleSound(this);"，或者从脚本创建img并使用addEventListener ("click",toggleSound())

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

小提琴演示：http://jsfiddle.net/K9553/

相关文章：