javascript - 顺序播放音频文件不起作用

Question

在英语/泰语网页中，我有4列带有相关音频文件的英语短语。通过单击鼠标可以从每一列中选择一个短语。选择了4个词组后，我希望它们的音频文件按顺序播放。这是进行选择的4个代码段中的1个(它们仅在html标签选择和localStorage位置上有所不同)，这些工作正常。

var audioIsPlaying = false;

jQuery("div#wh_set1").on("click", "p span", function (evnt) {      
  var elementId = evnt.target.id,
  word1 = jQuery(this).text();
  jQuery("span#word1").html(word1);                
    var pathVar = document.getElementById("pathVar").innerHTML,
       oggVar = pathVar+elementId+".ogg",
       mp3Var = pathVar+elementId+".mp3";
       if(Modernizr.audio.ogg) {
         localStorage.setItem("wh_set1", oggVar);
      }else {
        localStorage.setItem("wh_set1", mp3Var);
    }
 });

音频文件的顺序播放应由以下代码处理:

var currentAudio  = document.createElement('audio'),  i ;  
function audioPlay(i)  {
  audioIsPlaying = false;
  currentAudio.setAttribute("src", localStorage.getItem('wh_set' + i));
  currentAudio.load();
  currentAudio.play();
  audioIsPlaying = true;
//    alert("wh_set" +i);                                                        
}
for(i = 1; i <= 4; i++) {
  currentAudio.addEventListener("ended", audioPlay(i));
}  

但这不能按预期工作。仅播放四个选定短语中最后一个的音频文件。如果未注释警报，则每个选择均以正确的顺序播放。同样，如果代码是通过Firebug步进的，则音频文件将以正确的顺序播放。
我看过以前有关音频文件排序的文章，但可以看到任何直接适用的内容。任何帮助将非常感激。

Answer 1

问题是:您不向事件结束添加函数，而是立即调用它。
您的代码执行以下操作:

audioPlay(1);
audioPlay(2);
audioPlay(3);
audioPlay(4);

前三个音频没有加载和启动的机会。

我更换了

for(i = 1; i <= 4; i++) {
  currentAudio.addEventListener("ended", audioPlay(i));
}  

至

 var i = 1;
    currentAudio.addEventListener( "ended", function() {
      i++;
      if ( i < 5 ) {
        audioPlay( i );
      }
    } );
  audioPlay( 1 );

它在Chrome和Firefox中完美运行