javascript - 即使我已经结束功能，按顺序播放音频数组也不起作用

Question

我正在尝试按每个音频之间的持续时间顺序播放我的所有音频文件。现在，我可以播放第一个音频，但我必须再次单击播放按钮才能播放第二个音频。 ended 函数应该处理这个，不是吗？感谢您的善意和帮助。

var playList = [{
        "duration": 1000,
        "value": "0_silence"
    }, {
        "duration": 4000,
        "value": "1_hello"
    }, {
        "duration": 6000,
        "value": "2_how_old"
    }];

$(document).ready(function() {
  var audioElement = document.createElement('audio');

        var i = 0;
        $("#play").on("click", function(){

            audioElement.addEventListener("ended", playAudio(playList));
                function playAudio() {
                    if(i < playList.length) {
                        audioElement.setAttribute('src', 'sound/' + playList[i].value + '.wav');

                        setTimeout(function (){audioElement.play(); playAudio, playList[i].duration;});

                        i++;
                    } else {
                        i = 0;
                    }
                }
        });

   //         playAudio(playList);
   //         });
   //                
   //         function playAudio() {
   //         var audioElement = document.createElement('audio');
   //         audioElement.addEventListener("ended", playAudio(playList));
   //         if (i < playList.length) {
   //                    
   //         var audioElement = document.createElement('audio');
   //         audioElement.addEventListener("ended", playAudio(playList));                   

   //         audioElement.setAttribute('src', 'sound/' + playList[i].value + '.wav');
   //         audioElement.play();
   //         setTimeout(playAudio, playList[i].duration);
   //         i++;
   //         } else {
   //         i = 0; // reset i to zero to start over if button clicked again
   //         }
   //         }
}

Answer 1

第一个错误在这一行:

audioElement.addEventListener("ended", playAudio(playList));

这里函数 playAudio() 被调用，它的结果(在本例中为 undefined)被传递给 addEventListener()作为论据，这当然行不通。如果 playList 是全局的，只需将其更改为:

audioElement.addEventListener("ended", playAudio);  // function is now referenced

此外，每次单击播放按钮时都会调用处理程序。仅在创建元素时添加一次。

如博文所示，setTimeout() 调用也存在错误，因为它缺少时间参数并且在功能 block 内包含无效语句。

但是，没有必要使用此调用，因为在较新的浏览器中，在元素上调用 play() 会触发调用。对于旧版浏览器，您可能需要使用 canplay 事件。 setTimeout() 在这两种情况下都不推荐。

你还应该 call load()在 play() 之前重置和清理元素，并开始加载新源。

最后，如果打算在循环中播放列表，则当播放最后一首轨道时列表将失败，因为 i 在不调用播放的单独 else block 中重置。

您可能需要考虑播放按钮的行为方式，以防止它在播放时加载样本(即切换暂停/播放)。除了播放按钮(我重新连接它以共享 playAudio() 函数)之外，我在此处使用随机短样本完成了上述修复:

var playList = [{
  "duration": 1000,
  "value": "http://sampleswap.org/samples-ghost/SFX%20and%20UNUSUAL%20SOUNDS/ELECTRO%20and%20SYNTHETIC/257[kb]50s_space_telemetry.aif.mp3"
}, {
  "duration": 4000,
  "value": "http://sampleswap.org/samples-ghost/SFX%20and%20UNUSUAL%20SOUNDS/ELECTRO%20and%20SYNTHETIC/85[kb]analog_alarm_up.aif.mp3"
}, {
  "duration": 6000,
  "value": "http://sampleswap.org/samples-ghost/SFX%20and%20UNUSUAL%20SOUNDS/ELECTRO%20and%20SYNTHETIC/42[kb]alien_alarm.aif.mp3"
}];

$(document).ready(function() {
  var audioElement = document.createElement('audio');
  
  // reference function instead of calling it. Also, only set it once.
  audioElement.addEventListener("ended", playAudio); 
    
  var i = 0;
  $("#play").on("click", playAudio); // rewired to share playAudio()
  
  function playAudio() {
    var entry = playList[i++];       // get current entry, increment i
    if (i >= playList.length) i = 0; // if i=> length, reset

    audioElement.src = entry.value;  // <- for demo samples only. 'sound/' + entry.value + '.wav';
    audioElement.load();             // cleanup old fun, invoke loading of new
    audioElement.play();             // cue up play
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=play>Play</button>