I show you a Javascript code for a countdown timer that plays a sound coordinated with a countdown.
function contador(){
var segundos = 6;
imagen5='<img src="contadorNum5.png" alt="contadorNum5" />'
imagen4='<img src="contadorNum4.png" alt="contadorNum4" />'
imagen3='<img src="contadorNum3.png" alt="contadorNum3" />'
imagen2='<img src="contadorNum2.png" alt="contadorNum2" />'
imagen1='<img src="contadorNum1.png" alt="contadorNum1" />'
imagen0='<img src="contadorNum0.png" alt="contadorNum0" />'
var cuentaAtras = setInterval(function(){
segundos--;
switch(segundos){//voy mostrando en el div los dibujos correspondientes al segundo
case 5:
document.getElementById("contador").style.visibility = 'visible';
document.getElementById("contador").innerHTML=imagen5;
sonidosegundos1();
break;
case 4:
document.getElementById("contador").innerHTML=imagen4;
sonidosegundos1();
break;
case 3:
document.getElementById("contador").innerHTML=imagen3;
sonidosegundos1();
break;
case 2:
document.getElementById("contador").innerHTML=imagen2;
sonidosegundos1();
break;
case 1:
document.getElementById("contador").innerHTML=imagen1;
sonidosegundos1();
break;
case 0:
document.getElementById("contador").innerHTML=imagen0;
sonidosegundos2();
break;
case -1://cuando se alcanza esta cifra el indicador se oculta-
document.getElementById("contador").style.visibility = 'hidden';
}
if(segundos < 0)
clearInterval(cuentaAtras);
},1000);
}
function sonidosegundos1(){
var sonido = new Audio("tick.wav");
sonido.play();
}
function sonidosegundos2(){
var sonido2 = new Audio("tick2.wav");
sonido2.play();
}
Outside the script there is a div, which is where the counter appears, which is hidden and appears as the count starts or ends.
<div id="contador"></div>
-The conclusion is that I wanted this sound effect to occur with the change of each image, but from what it seems in Javascript nothing can be done without there being a user interaction with the browser either in the form of a click, in form of keypress or any other type of event (at least from what I've been able to see).
The funny thing is that the error it produces when reporting that the user has not interacted before DOMException: play() failed because the user didn't interact with the document first. it is removed at the time we do any event.
In my case this problem is not going to occur, because this effect occurs in a game that implies that the user is moving a cursor in the form of a crosshair before the counter reaches the end, which allows it to always be producing interaction, which for practical purposes would not give me an error due to the continuous interaction of the user (only by detecting a click on the cursor, or that it is pressed, it no longer fails).
I also have a question:
For testing, I simply call the counter function to check its operation, but I would like to test it continuously, that is, that it always occurs. I've tried running it in a while or a do while, or even several times, but I haven't been able to get it to work continuously (I mean, it counts down and ends, and then after a while, or with a True , would occur again), I haven't succeeded yet, I would like to have some option.
To repeat the function, you can make it recursive, that is, you only have to call it within itself.
In your case: case -1: counter()
Remember that this will be executed forever if you want to put a limit you can add a counter and a condition when it is repeated certain times the recursion stops by exiting the function with
return