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播放音频。

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

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

1 个答案: