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 setinterval, 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);