複数のオーディオファイルをループして、JavaScriptを使用して連続して再生する方法は？

Question

ボタンをクリックする兄弟IDから3つのオーディオを、4つのオーディオを再生したいと思います。問題を解決するのを手伝ってください。

私はコードを変更しましたが、オーディオはまだ順番に再生されていません。最後のオーディオは、オーディオの間に十分なギャップがなく、2番目と3番目に続いて再生されます。

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

ループ内でsetTimeoutを使用しないでください。他のすべてのプログラミング言語とは異なる動作をします。あなたのソリューションは、このようなものでなければなりません。 前のコードでは、変数inxは最後の項目に対してのみ実行されます。

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

オーディオタグがエンドは、リスト内の次を開始することができますemitedた後、あなたが

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

を聞くことができるイベントがあります。