Come eseguire il looping di più file audio e riprodurli in sequenza usando javascript?

Question

Onclick di un pulsante Voglio riprodurre 4 audio, tre audio dall'ID fratelli e uno finale dall'ID cliccato. Per favore aiutami a risolvere il problema.

Ho modificato il codice ma l'audio non viene ancora riprodotto in sequenza. L'ultimo audio viene riprodotto per primo seguendo il secondo e il terzo senza abbastanza spazio tra gli audio.

$(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

Non utilizzare setTimeout all'interno di un ciclo, esso agisce in modo diverso su tutti gli altri linguaggi di programmazione. La tua soluzione dovrebbe essere qualcosa di simile. Nel codice precedente la variabile inx viene eseguita solo per l'ultimo elemento.

$(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); 
 
});

Answer 2

il tag audio ha un evento che è possibile ascoltare

audio.addEventListener('ended',function(e){ 
}); 

dopo il trascorso è stato emited si può iniziare la prossima a nella lista.