0

Simple y sencillamente Javascript no me quiere eliminar el evento de un <audio>, ya hice todo lo que investigue en internet y nada funciona.

No se que tengo mal o porque Javascript no esta haciendo caso y ya estoy desesperado.

JavaScript

var reproduccion = false;

var sonido = document.querySelector("#sonido");
var btn = document.querySelector("#btnAgregar");

btn.addEventListener("click", function(){
   sonido.addEventListener("ended", function(){
        reproducirAudioFinal(1);
   });
});

function reproducirAudioFinal(estado = "")
{
    if(reproduccion == false)
    {
      if(estado == 1)
        sonido.setAttribute("src", "audio/ganaste.mp3");
      else
        sonido.setAttribute("src", "audio/perdiste.mp3");
    
      sonido.play();
      reproduccion = true;
    }
    else
    {
        sonido.pause();
        reproduccion = false;
    }
}

function eliminarEvento()
{
    sonido.removeEventListener("ended", function(){
        reproducirAudioFinal();
    });
}

HTML

<audio id="sonido"></audio>
<button type="button" id="btnAgregar">Agregar Evento</button>
<button type="button" class="btn" onClick="eliminarEvento();">Eliminar Evento</button>
2
  • Con la información que haz proporcionado no puedo reproducir el problema (chiste malo), pero puedo ver que en tu html tienes una "clase" btn y en tu querySelector intentas seleccionar un "Id" has probado cambiar eso? Commented el 1 ago. 2023 a las 18:02
  • @MarcosLopez ya agregue ese boton al html para que se pueda entender mejor Commented el 1 ago. 2023 a las 18:06

1 respuesta 1

0

En síntesis tu tienes esto:

//agregar evento
sonido.addEventListener("ended", function(){
     reproducirAudioFinal(1);
});

//eliminar evento
sonido.removeEventListener("ended", function(){
    reproducirAudioFinal();
 })

Esto es incorrecto, las función que tu pasas en el addEventListener no es la misma que le pasas en el removeEventListener y no son la misma no porque falte el 1 en la última, no son la misma porque están almacenadas en espacio de memoria distintos.

Tienes que crear la función con un nombre

function nombredelafuncion(){
  reproducirAudioFinal(1);
}
//agregar evento
sonido.addEventListener("ended", nombredelafuncion);

//eliminar evento
sonido.removeEventListener("ended", nombredelafuncion);

O por otro lado, usar directamente a reproducirAudioFinal

//agregar evento
sonido.addEventListener("ended", reproducirAudioFinal);

//eliminar evento
sonido.removeEventListener("ended", reproducirAudioFinal);

En este caso, seguramente tienes que setear el valor default en 1

function reproducirAudioFinal(estado = 1)
{
  //etc

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