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

How to create a only mute/unmute button (like youtube) in html(如何在 html 中创建唯一的静音/取消静音按钮(如 youtube))

问题描述

我正在创建一个网站，我放了背景音乐，我的问题是我不知道如何创建一个按钮(只有一个)来静音/取消静音.我想要一个静音按钮，可以根据情况静音/取消静音(如果音乐静音，那么按钮应该有扬声器的图像，用于听到声音，如果按下它，那么你开始听音乐和按钮的图像发生变化，反之亦然)

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="aW1hZ2VzL3Nvbmlkb09OLnBuZw==" onclick="this.src="aW1hZ2VzL3Nvbmlkb09GRi5wbmc="" width=30% height=7%>
                        </td>

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

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

非常感谢您

推荐答案

HTML

<input type="checkbox" name="un-mute" id="un-mute">
<label for="un-mute" class="unmute">
    <img src="aHR0cDovL3VwbG9hZC53aWtpbWVkaWEub3JnL3dpa2lwZWRpYS9jb21tb25zLzMvM2YvTXV0ZV9JY29uLnN2Zw==" alt="TXV0ZV9JY29uLnN2Zw==" title="TXV0ZSBpY29u">
</label>
<label for="un-mute" class="mute">
    <img src="aHR0cDovL3VwbG9hZC53aWtpbWVkaWEub3JnL3dpa2lwZWRpYS9jb21tb25zLzIvMjEvU3BlYWtlcl9JY29uLnN2Zw==" alt="U3BlYWtlcl9JY29uLnN2Zw==" title="VW5tdXRlL3NwZWFrZXIgaWNvbg==">
</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/

使用 :checked 伪类选择器

using :checked pseudo-class selector

这篇关于如何在 html 中创建唯一的静音/取消静音按钮(如 youtube)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！