1

¡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:

Icono Mute

Unmute:

Icono 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)

2

1 respuesta 1

1

En este código sonidoBox.addEventListener("click", sonidovich()); no puedes poner así la funcion, debes de hacer como el otro. ()=> sonidovich(). Si no, haces que se ejecute la función al iniciar

2
  • 1
    O simplemente sonidoBox.addEventListener("click", sonidovich); Commented el 3 jun. 2022 a las 18:57
  • Eso también resuelve mi problema.
    – Espulito
    Commented el 3 jun. 2022 a las 22:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.