Birden fazla ses dosyası arasında nasıl döngü yapılır ve javascript kullanılarak sırayla oynatılır? Bir düğmeye

Question

Onclick ben 4 ses en, kardeşler kimliği ve tıklanan kimliğinden nihai birinden üç müzikler oynamak istiyorum. Lütfen sorunu çözmeme yardımcı olun.

Ben ancak ses hala dizide oynamıyor kod değişti. Son ses, önce sesler arasında yeterli boşluk olmadan 2. ve 3. takip eder.

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

, bu farklı tüm diğer programlama dilleri davranır. Çözümünüz böyle bir şey olmalı. Bir önceki kod sizin değişken inx yılında sadece son öğe için çalıştırın.

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

ses etiketi uçlu Listede sonraki başlayabilirsiniz emited gönderilmesinden sonra

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

dinleyebilirsiniz bir olay vardır. Bir döngü içinde setTimeout kullanmamalıdır