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));
}

但这不符合预期。仅播放4个所选短语中最后一个的音频文件。如果取消注释警报，则每个选择都以正确的顺序播放。同样，如果使用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中完美运行

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

1 个答案: