¡Hola!, estoy creando un juego web en el cual hay un botón que hace un sonido al presionarlo. Como entiendo que en algunos casos puede resultar molesto, entonces decidí agregar un botón para poder cancelar el sonido de este mismo. Pero lo que sucede es que al cargar la página la función se ejecuta automáticamente y además cuando hago click en el icono no se ejecuta. (El cual no es el objetivo deseado)
Mi objetivo es:
Inicialmente debería aparecer el icono "Mute" que sería el icono que representa gráficamente el sonido sin mutear (silenciar) y el sonido debería escucharse, entonces... Cuando se llame a la función "sonidovich()" mediante el botón HTML con su respectivo eventListener, debería cambiar al icono "Unmute" que representa gráficamente el sonido muteado (silenciado) y debería dejar de escucharse sonido cuando se ejecute la función.
A continuación les dejo las imágenes de "Mute" y "Unmute" junto a mi código.
Mute:
Unmute:
Código:
let btn = document.getElementById("btn");
let audio = document.getElementById("audio");
let sonidoBox = document.getElementById("sonidoBox");
let mute = document.querySelector(".mute");
let unmute = document.querySelector(".unmute");
let muteID = document.querySelector("#mute");
let unmuteID = document.querySelector("#unmute");
let silenciar = false;
let reproduciendo = false;
btn.addEventListener("click", () => {
// Al hacer click en el botón
if (!silenciar) {
if (reproduciendo === false) {
audio.play();
reproduciendo = true;
setTimeout(() => {
reproduciendo = false;
}, /*(Duración del audio)*/);
} else {
audio.pause();
audio.play();
}
}
});
sonidoBox.addEventListener("click", sonidovich());
function sonidovich() {
if (silenciar === false) {
silenciar = true;
mute.style.display = "none";
unmute.style.display = "inline";
} else {
silenciar = false;
mute.style.display = "inline";
unmute.style.display = "none";
}
console.log("Función ejecutada");
console.log("Silenciar: " + silenciar);
}
.sonidoBox {
height: 32px;
width: 32px;
background-color: blue;
cursor: pointer;
.unmute {
display: none;
}
}
<div class="sonidoBox" id="sonidoBox">
<img
src="assets/icons/sound/mute.png"
alt="Silenciar"
class="icon mute"
id="sonido mute"
/>
<img
src="assets/icons/sound/unmute.png"
alt="Desilenciar"
class="icon unmute"
id="sonido unmute"
/>
</div>
PD: Lo que intenté hacer con la variable "reproduciendo" fue que el sonido y la animación del botón todavía se estaban ejecutando entonces que se pause y se vuelva a ejecutar. (Para no dar un efecto de bug)
sonidoBox.addEventListener("click", sonidovich());
: ¡Es que estás llamando a la función!