How to loop through multiple audio files and play them sequentially using javascript?

Question

Onclick of a button I want to play 4 audio's, three audios from the siblings ID and final one from the clicked ID. Please help me resolve the issue.

I have changed the code however the audio is still not playing in sequence. Last audio plays first following by 2nd and 3rd without enough gap between audios.

$(document).on('click', '.phonics_tab .audioSmImg_learn', function () {
    var PID = '#' + $(this).parents('.phonics_tab').attr('id');
    audioFileName = 'audio/' + $(this).attr('id') + '.mp3';
    var audioElmnt = {};
    var audioFileName1 = {};

    $(PID + ' .word_box_item').each(function (inx, i) {
        if (inx >= 1) {
            audioElmnt[inx - 1].pause();
            audioElmnt[inx - 1].currentTime = 0;
        }
        audioElmnt[inx] = document.createElement('audio');
        audioElmnt[inx].setAttribute('autoplay', 'false');
        audioFileName1[inx] = 'audio/' + $(this).children('h2').attr('id') + '.mp3';
        audioElmnt[inx].setAttribute('src', audioFileName1[inx]);
        audioElmnt[inx].load();

         //in previous code your inx only run for the last item.
        playAudio(audioElmnt[inx], 300); // here the object will be sent to the function and will be used inside the timer.
    });

    function playAudio(audioElmnt, delay){
        setTimeout(function () {
            audioElmnt.play();
        }, delay);
    }   

    setTimeout(function () {
        audioElement.currentTime = 0;
        audioElement.pause();
        audioElement.setAttribute('src', audioFileName);
        audioElement.load();
        audioElement.play();
    }, 500);
});

Answer 1

You shouldn't use setTimeout inside a loop , it acts differently all other programming languages. Your solution should be something like this. In previous code your variable inx only run for the last item.

$(document).on('click', ' .audioImg', function () {
    var ParentID = '#' + $(this).parents('.parent').attr('id');
    audioFileName = 'audio/' + $(this).attr('id') + '.mp3';
    var audioElmnt = {};
    var audioFileName1 = {};

    $(PID + ' .item').each(function (inx, i) {
        if (inx >= 1) {
            audioElmnt[inx - 1].pause();
            audioElmnt[inx - 1].currentTime = 0;
        }

        audioElmnt[inx] = document.createElement('audio');
        audioElmnt[inx].setAttribute('autoplay', 'false');
        audioFileName1[inx] = 'audio/' + $(this).children('h2').attr('id') + '.mp3';
        audioElmnt[inx].setAttribute('src', audioFileName1[inx]);

        audioElmnt[inx].load();

       //in previous code your inx only run for the last item.
        playAudio(audioElmnt[inx], 150); // here the object will be sent to the function and will be used inside the timer.

    });
    var playAudio = function(audioElmnt, delay){
       setTimeout(function () {
            audioElmnt.play();
        }, delay);
    }
    setTimeout(function () {
        audioElement.currentTime = 0;
        audioElement.pause();
        audioElement.setAttribute('src', audioFileName);
        audioElement.load();
        audioElement.play();
    }, 500);
});