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

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。

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

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

How can I play different sound files on click?

javascript

event-listener

html5-audio