JavaScript: Play each audio file in a playlist multiple times consecutively, with a pause between plays

Question

I have an audio playlist for language learning. Each file of playlist is supposed to be played once or more times consecutively, and so the whole playlist, with a pause between plays. Right now I can play in this mode only a single file, not the whole playlist.

The HTML part:


    
    ....

The JavaScript part (from here) that works if playing only one file, not the whole list. The only problem here is the pauseAudio() function, that doesn't stop all playbacks.

const div = document.querySelectorAll( 'div#audio-files .myAudio' );
var numberOfTimes = 2;
var delay = 3000;

let audioFile = div[0];

function playAudio() { playSound( audioFile, numberOfTimes, delay ); }
function pauseAudio() { audioFile.pause(); } // works not good

function playSound( audioFile, numberOfTimes = 1, delay = 0, firstTime = true ) {
    if( firstTime ) { audioFile.play(); }

    setTimeout( () => {
        if( ! firstTime ) { audioFile.play(); }

        if( numberOfTimes > 0 ) {
            numberOfTimes--;
            playSound( audioFile, numberOfTimes, delay, firstTime = false );
        }

    }, delay );
}

I suppose that the playAudio() function must changed to get the desired result (playing the entire playlist), but I can't figure out how exactly to do it. This is what I tried:

function playAudio() {

    for( let i = 0; i < div.length; i++ ) {

        let audioFile = div[i];

        if( i === 0 ) { playSound( audioFile, numberOfTimes, delay ); }

        let timeInterval = audioFile.duration * 1000 * 2 + delay * 2;

        setTimeout( () => {
            if( i > 0 ) { playSound( audioFile, numberOfTimes, delay ); }
        }, timeInterval );
    }
}

Any ideas?

Rocky Sims · Answer

const audioElems = document.querySelectorAll('.myAudio');
const desiredPlayCount = 2;
const desiredDelayMs = 2000;

let audioIndex = 0;
let playCount = 0;
let timeoutId = null;

function playAudio() {
  audioElems[audioIndex].play();
}

function pauseAudio() {
  audioElems[audioIndex].pause();
  clearTimeout(timeoutId);
}

audioElems.forEach(audioElem =>
  audioElem.addEventListener('ended', onEnded)
);

function onEnded() {
  playCount++;
  
  if (playCount < desiredPlayCount) {
    timeoutId = setTimeout(() => {
      audioElems[audioIndex].play();
    }, desiredDelayMs);
  } else {
    playCount = 0;
    audioIndex = (audioIndex + 1) % audioElems.length;
    
    if (audioIndex !== 0) {
      //auto play next audio file in the sequence
      timeoutId = setTimeout(() => {
        audioElems[audioIndex].play();
      }, desiredDelayMs);
    }
  }
};

JavaScript: Play each audio file in a playlist multiple times consecutively, with a pause between plays

1 Answers