在 javascript 中使用 for-loop 为音频文件分配不同的源

Question

我正在尝试构建一个音板（类似于 therapboard dot com） - 我希望 javascript 在合适的声音（1.ogg、2.ogg、 ...）单击图像时，通过循环。

图像部分有效，当我单击任何图像时也会播放声音，但它是相同的声音（在这种情况下是循环中的最后一个......所以 3.ogg）。 到目前为止我想出的相当容易的开始是我想要的吗？

    <script>
var i;
for(i=0; i<4; i++){
    var imgsrc = "niels" + i + ".png";
    var audiosrc = i + ".ogg";
    var image = document.createElement("IMG");
    image.setAttribute("src", imgsrc);
    image.addEventListener('click', myPlay);

    var audio = document.createElement('audio');
    audio.src = audiosrc;

    function myPlay(){
        var audio = new Audio (audiosrc);
        audio.play();
    }

    document.body.appendChild(image);

}
</script>

Answer 1

尝试这个。 您有一个关闭问题，这消除了关闭的需要

document.body.addEventListener('click', function(e) {
  var tgt = e.target;
  if (tgt.tagName === "IMG") {
    var audiosrc = tgt.getAttribute("data-audio");
    if (audiosrc) {
      var audio = new Audio(audiosrc);
      audio.play();
    }
  }
})

for (var i = 0; i < 4; i++) {
  var imgsrc = "niels" + i + ".png";
  var audiosrc = i + ".ogg";
  var image = document.createElement("IMG");
  image.setAttribute("data-audio", audiosrc)
  image.setAttribute("src", imgsrc);
  document.body.appendChild(image);
}