I recently created a basic matching game that includes audio files for different cards. The code snippet below shows how I incorporated these audio files:
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;
});
}
In my startGame() function, I made sure to include an eventListener that triggers audio.play() when a card is clicked.
While inspecting the dev tools, I noticed that each card has its corresponding audio element. However, upon clicking on the cards, only one audio file plays regardless of the specific card selected.
You can view the code on my GitHub repository: https://github.com/cMikolai/guitar-colour-system-game/blob/master/js/app.js
Could anyone provide guidance on how I can successfully play the sound associated with the card being clicked?