Подождите, пока не произойдет событие, прежде чем делать что-либо еще в JQuery

Question

Я задал похожий вопрос, но вскоре нашел его в топи c, поэтому позвольте мне объяснить мою проблему.

У меня 5 од ios. Цель для каждого аудио, воспроизвести его 3 раза.

Вот код:

$('audio').each(function(index){
    playAudio(this.player, index);
});

function playAudio(audio, index){
        var loop = 3;

        // This will loop 3 times
        for(var i = 0; i < loop; i++){
            audio.play();

            $('.worship-items audio').eq(index).on('ended', function(){
                // When the song has ended, set the progress(current time) back to 0 seconds.
                audio.setCurrentTime(-1);
                audio.pause();
            });
        }
    }

Проблема, с которой я столкнулся, заключается в том, что консоль выдает мне эту ошибку:

(15) Uncaught (в обещании) DOMException: запрос play () был прерван вызовом pause ().

Может ли кто-нибудь помочь мне в этом?

Редактировать: Меня попросили добавить html, поэтому вот оно:

<audio src="audio1.mp3"></audio>
<audio src="audio2.mp3"></audio>
<audio src="audio3.mp3"></audio>
<audio src="audio4.mp3"></audio>
<audio src="audio5.mp3"></audio>

Answer 1

for l oop работает синхронно. Вы должны поместить вызов для повторения в обработчик ended.

Аналогично, .each() выполняется синхронно. Вам нужно начинать следующий звук только после того, как все повторы предыдущего закончились.

function playAudio(audios, index, loop, counter) {
    if (counter >= loop) {
        index++;
        if (index >= audios.length) {
            return;
        }
        playAudio(audios, index, loop, 0);
    }
    let audio = audios[index];
    audio.player.play();
    $(audio).off("ended").on("ended", function() {
        this.player.setCurrentTime(-1);
        playAudio(this, index, loop, counter + 1);
    });
});

playAudio($(".worship-items audio"), 0, 3, 0);