使用javascript中的for循环为音频文件分配不同的源

Question

[我正在尝试构建一个音板（类似于therapboard dot com）-我希望javascript在合适的声音（1.ogg，2。）旁边创建图像（命名为niels1.png，niels2.png ...）。 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);
}