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

Question

我正在尝试构建音板（类似于 therapboard.com）- 我希望 javascript 创建图像（命名为 niels1.png、niels2.png...）单击图像时，通过循环在合适的声音旁边（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);
}

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

use for-loop in javascript to assign different sources for audiofiles

html

javascript

audio

onclick

src