используйте цикл for в javascript, чтобы назначать разные источники для аудиофайлов - PullRequest
Новая
       37

используйте цикл for в javascript, чтобы назначать разные источники для аудиофайлов

1 голос
/ 25 сентября 2019

Я пытаюсь построить деку (похожую на therapboard dot 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>

1 Ответ

0 голосов
/ 25 сентября 2019

Попробуй это.У вас есть проблема закрытия, и это устраняет необходимость закрытия 

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