0

Dentro de un sitio web que se actualiza en tiempo real, busco que al momento que la distancia sea menor o igual a 15 esta cambie de color y se reproduzca un sonido como aviso. Si bien el código funciona, me reproduce una y otra vez el sonido. Se que es porque está dentro del , pero no se me ocurre ninguna solución para que el sonido se reproduzca por una única vez (tampoco sé si es posible).

El siguiente código tiene una cuenta regresiva como ejemplo, pero no es igual al sitio web que mide la distancia, ya que no disminuye de 20,19,18, etc. sino que disminuye "aleatoriamente" sin seguir un patrón (ej: 20,18,14,12,9, etc.)

<div class="grupo">
  <div class="distacia" id="countdown"></div>
</div>
// Inicio codigo ejemplo
window.onload = updateClock;

var totalTime = 20;

function updateClock() {
  document.getElementById('countdown').innerHTML = totalTime;
  if(totalTime==0){
    console.log('Final');
  }else{
    totalTime-=1;
    setTimeout("updateClock()",1000);
  }
}
// Fin codigo ejemplo

setInterval(() => {
    let grupos = Array.from(document.querySelectorAll('.grupo'));
    
    for (let grupo of grupos) {
      let distancia = grupo.querySelector('.distancia'),
        distancia_valor = parseInt(distancia.innerHTML, 10);
      if (distancia_valor <= 15) {
        distancia.style.backgroundColor = "#ae5cff";
        const audio = new Audio("https://audio.jukehost.co.uk/74LEpgKW5c1fXYa8v4ncp8OVX6sPJDNG.mp3");
        audio.volume = 0.5;
        audio.play();
      } else {
        distancia.style.backgroundColor = "none";
      }
    }
  },
  1000);

1 respuesta 1

1

Ya tienes un timeout que se llama a si mismo de forma recursiva, no veo necesidad de usar el interval sino de aprovechar el timeout que ya tienes, además estas reproduciendo el sonido siempre que la cuenta atrás sea <= 15, esto se hara para el 14, el 13 etc.

Envuelve la lógica de la 'reproducción del sonido/cambio de color' en una función, y llámala dentro del timeout cuando la cuenta atrás sea exactamente 15:

window.onload = updateClock;

let totalTime = 20;

function updateClock() {
  document.getElementById('countdown').innerHTML = totalTime;
  if(totalTime === 0){
    console.log('Final');
  } else {
    totalTime === 15 && playSound() // si totalTime es igual a 15, se cambia el color y se reproduce el sonido
    totalTime -= 1;
    setTimeout("updateClock()",1000);
  }
}

const playSound = () => { // no hay necesidad de un interval para esta porcion de codigo, puede aprovecharse y correrse dentro del timeout tranquilamente
  let grupos = Array.from(document.querySelectorAll('.grupo'));
  for (let grupo of grupos) {
    let distancia = grupo.querySelector('.distancia');
    distancia_valor = parseInt(distancia.innerHTML, 10);    
    distancia.style.backgroundColor = "#ae5cff";
    const audio = new Audio("https://audio.jukehost.co.uk/74LEpgKW5c1fXYa8v4ncp8OVX6sPJDNG.mp3");
    audio.volume = 0.5;
    audio.play();
    distancia.style.backgroundColor = "none";
  }
}
  <div class="grupo">
    <div class="distancia" id="countdown"></div>
  </div>

Edit: Si los intervalos son aleatorios (por ejemplo poder pasar de 18 a 12 en un intervalo) y quieres que se cambie el color y se reproduzca el sonido una sola vez cuando la cuenta atrás sea 15 o menor, modifica de esta manera la función updateClock() y agregas una variable auxiliar:

let totalTime = 20;
let minusFlag = true

function updateClock() {
  document.getElementById('countdown').innerHTML = totalTime;
  if(totalTime === 0){
    console.log('Final');
  } else {
    if(totalTime <= 15 && minusFlag) {
      playSound()
      minusFlag = false
    } 
    totalTime -= 1;
    setTimeout("updateClock()",1000);
  }
}

Por otro lado, si necesitas el interval si o si podes hacerlo de esta manera:

window.onload = updateClock;

var totalTime = 20;
let flag = false

function updateClock() {
  document.getElementById('countdown').innerHTML = totalTime;
  if(totalTime==0){
    console.log('Final');
  }else{
    totalTime-=1;
    setTimeout("updateClock()",1000);
  }
}
// Fin codigo ejemplo

setInterval(() => {
    let grupos = Array.from(document.querySelectorAll('.grupo'));
    
    for (let grupo of grupos) {
      let distancia = grupo.querySelector('.distancia'),
        distancia_valor = parseInt(distancia.innerHTML, 10);
      if (distancia_valor <= 15 && !flag) {
        flag = true
        distancia.style.backgroundColor = "#ae5cff";
        const audio = new Audio("https://audio.jukehost.co.uk/74LEpgKW5c1fXYa8v4ncp8OVX6sPJDNG.mp3");
        audio.volume = 0.5;
        audio.play();
      } else {
        distancia.style.backgroundColor = "none";
      }
    }
  },
  1000);
2
  • Te agradesco la ayuda, el tema es que el codigo de la cuenta regresiva solo era un ejemplo para que preueben el codigo dentro del setInterval, no estan relacionados. La web que modifico tiene actualizaciones constantes, por lo que si no uso setInterval el codigo se ejecuta una sola vez Commented el 6 oct. 2023 a las 21:36
  • 1
    @MiqueasSanchez que lastima que no te haya servido, ahi modifique mi respuesta para que funcione con el interval, si no te sirve prueba modificando la pregunta agregando mas detalles o aclaraciones. Commented el 6 oct. 2023 a las 22:01

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.