Làm thế nào để lặp qua nhiều tập tin âm thanh và phát chúng tuần tự bằng javascript?

Question

Onclick của một nút Tôi muốn phát 4 âm thanh, ba âm thanh từ ID anh chị em và số cuối cùng từ ID đã nhấp. Xin hãy giúp tôi giải quyết vấn đề.

Tôi đã thay đổi mã tuy nhiên âm thanh vẫn không phát theo trình tự. Âm thanh cuối cùng phát lần đầu tiên theo sau bởi 2 và 3 mà không có đủ khoảng cách giữa các âm thanh.

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

Bạn không nên sử dụng setTimeout bên trong một vòng lặp, nó hoạt động khác nhau tất cả các ngôn ngữ lập trình khác. Giải pháp của bạn nên là một cái gì đó như thế này. Trong mã trước, biến số inx chỉ chạy cho mục cuối cùng.

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

thẻ âm thanh có một sự kiện mà bạn có thể nghe

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

sau khi đã kết thúc được emited bạn có thể khởi động tiếp theo trên trong danh sách.