如何在点击时播放不同的声音文件？

Question

我构建了一个简单的匹配游戏，并为几张卡片添加了音频文件，如下所示：

cardList.map((cardItem) => {
var card = document.createElement("li");
card.classList.add("card");

var img = document.createElement("img");
img.src = [cardItem.img]


  card.appendChild(img);

//audio starting here

audio = new Audio(cardItem.sound);
card.appendChild(audio);

audio.id += ' ' + cardItem.card;

deck.append(card);

card.className += ' ' + cardItem.name;
});
}

在我的 startGame() 函数中，我添加了一个 eventListener 来添加 audio.play();点击。

所以现在，当我打开开发工具时，我可以看到我的卡的音频元素，但是当我尝试点击它们时，我只会获得所有卡的一个音频文件，而不是我实际添加到其中的音频特定元素。

这是我的 GitHub 文件：https://github.com/cMikolai/guitar-colour-system-game/blob/master/js/app.js

谁能帮我弄清楚如何播放我添加到我点击的卡片的声音？

Answer 1

我下载了你的代码并开始玩了。播放音频的代码在 app.js 文件中的函数 startGame() 中。

app.js：

audio = []; // local variable declaration

...
... 

// some code

function startGame() {

  // some code

  for (var i = 0; i < clickedCard.length; i++) {
    clickedCard[i].addEventListener("click", function( event ) {
    this.classList.add("open", "show");

    openCards.push(this.getAttribute("class"));

    audio.load();
    audio.play(); // this is the line playing the audio

    matchCards();
    starRating();

    }, false);
  }
}

如您所见，您播放的不是来自所选卡的音频，而是来自局部变量audio。

因此，您必须识别所选卡并播放其各自的音频，而不是播放本地变量中的音频。