Wie durchläuft man mehrere Audiodateien und spielt sie nacheinander mit Javascript ab?

Question

Onclick eines Knopfes Ich möchte 4 Audios, drei Audios von der Geschwisteridentifikation und vom letzten von der geklickten Identifikation spielen. Bitte helfen Sie mir, das Problem zu lösen.

Ich habe den Code geändert, aber das Audio wird immer noch nicht nacheinander abgespielt. Die letzte Audiodatei wird zuerst von der zweiten und dritten Audiodatei abgespielt, ohne dass genügend Abstand zwischen den Audiodateien besteht.

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

Sie sollten setTimeout nicht innerhalb einer Schleife verwenden, es verhält sich anders als alle anderen Programmiersprachen. Deine Lösung sollte so etwas sein. In vorherigen Code Ihre Variable inx nur für den letzten Artikel ausführen.

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

der Audio-Tag hat ein Ereignis, das Sie

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

hören können, nachdem die ended emited wurde die nächste auf der Liste beginnen.