0

Buen día, comunidad, saludos a todos.

En esta ocasión busco su ayuda con una situación relacionada con JavaScript. Estoy creando un código que está destinado a funcionar desde la consola del navegador, ya que quiero automatizar una tarea repetitiva y no hay necesidad de recargar la página, por lo que no perderé el código en la consola. Lo que busco es reproducir un sonido o alerta en el momento en el que desaparezca un elemento en el DOM.

El código que tengo hasta ahora funciona, pero tiene el inconveniente de que el sonido se sigue reproduciendo hasta que el elemento vuelve a aparecer. Y lo que quiero es que sólo se reproduzca una vez.

El código JS:

let inter = setInterval(()=>{
  // Este es el elemento que desaparece
  if(!document.querySelector('.MuiButton-root')){
  // El sonido que se reproduce
    let music = new Audio('blip.wav');
    music.play(); 
    clearInterval('inter');
  }
}, 2500)

Decidí hacerlo con un setInterval(), puesto que necesito que el código esté pendiente de la desaparición del elemento constantemente, ya que no tiene un tiempo constante. Lo coloqué a 2.5seg porque es el tiempo más prudente en el que el elemento desaparece. Pero, como es de esperar, a los 2.5seg vuelve a verificar y si el elemento aún no existe, el sonido sigue reproduciéndose. Ya probé cambiando de posición el clearInterval() e incluso quitándolo y no funciona. No se me ocurre otra manera de estar verificando constantemente si el elemento existe o no.

Gracias de antemano.

3
  • Me pregunto cómo lo haces desaparecer... ¿Lo eliminas tal cual? ¿Por qué no hacer una función para hacerlo desaparecer realmente, y en ese momento reproduces el sonido? ¿No sería más lógico, en lugar de estar comprobando cada dos por tres si está o no? Además, así cómo está, si se dan las circunstancias, quizá reproduzcas el sonido con 2-2,5 segundos de retardo.
    – VFG
    Commented el 28 jun. 2022 a las 8:20
  • @VFG gracias por el comentario. Exactamente, como dices al final, en ocasiones, se reproduce el sonido con ese tiempo de retraso. Y el detalle es que no tengo control sobre la página, no puedo hacer desaparecer yo el elemento a voluntad, por eso estoy colocando el código en la consola. Es una página de tareas donde tengo que presionar un botón para buscar tareas disponibles. Cuando desaparece el botón del DOM, es porque apareció una tarea y allí es cuando quiero que me notifique a través del sonido. Commented el 29 jun. 2022 a las 19:01
  • @VFG y no puedo usar un addEventListener() con evento clic al botón porque en ocasiones la tarea no aparece inmediatamente al hacer clic en el botón de buscar tarea. El tiempo desde que se hace clic en el botón hasta que aparece la tarea, puede variar. Por eso busco algo que simplemente esté al pendiente de la desaparición del botón. Commented el 29 jun. 2022 a las 21:31

1 respuesta 1

0

Al final conseguí el objetivo con el siguiente código:

// Arreglo vació que contendrá los elementos de audio que se crean en cada llamada del setInterval.
let argSound = [];
let inter = setInterval(()=>{
    let sound = new Audio('https://leogratis.com/wp-content/plugins/modificaciones-personalizadas/includes/assets/blip.wav');
    // Se hace una copia del arreglo y se inserta el elemento sound creado en este ciclo. 
    argSound = [...argSound, sound];
    // Si el elemento de botón no existe en el DOM y la URL de la página es la indicada.
    if(!document.querySelector('.MuiButton-root') && location.href === 'https://hivemicro.com/feed/18972'){
        // Se reproduce el sonido sólo si el arreglo tiene más de 3 elementos. 
        if (argSound.length > 3){
            argSound[2].play(); 
        }
        // Se vacía el arreglo para que no reproduzca el sonido si aún se cumple la condición del if anterior. 
        argSound = [];
        clearInterval('inter');
    }
}, 1000);

Ahora el sonido se reproduce sólo una vez cuando aparece la tarea. Es rudimentario pero funcional. El rendimiento no es algo de lo que debía preocuparme en esta ocasión. Gracias a todos.

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.