Java script -All audio plays at once when attempting to play audio one by one in a sequence (through a for loop)

Question

Here is the link to code pen to my project https://codepen.io/RajTheSHow/pen/vZZPqZ when you press the wrong button it is supposed to play the sequence(with audio and button press in order).however what actually happens is when you press the wrong button it plays all the audio and changes the color at once and doesn't execute what is in the sleep function.you can see the problem in the pen.

the function that runs the sequence when you press the wrong button is below cal is where the order is stored of the sequence.

   //plays the sequence
function callBut(){
  onr=0;
for(i=0;i<cal.length;i++){
   // or eval ("s"+cal[i])
   window["s"+cal[i]].play();

   // set the but# to Clicked Color Ccol# then after 1 sec go back to normal color
     $("[but="+cal[i]+"]").css("background",window["Ccol"+cal[i]])
 sleep(500).then(() => {
// set the button# to Standard color Scol#
    $("[but="+cal[i]+"]").css("background",window["Scol"+cal[i]])

});


}

Answer 1

This is the correct and expected behaviour. What you want to achieve requires to wait for the end event and only then invoke play on the next clip. This can be achieved by properly handling the audio events you can look up online and "chaining" them playing one at a time, much like this:

var nextSound;

function playNext()
{
  var audio;

  if (nextSound >= cal.length)
  {
    return;
  }

  audio = $(window["s"+cal[nextSound++]]);
  audio.on("ended", playNext);
  audio[0].play();
}

nextSound = 0;
playNext();