Por favor, soy nuevo en JavaScript. Estoy tratando de crear un mini juego gratuito para algunos niños que ayudará a enseñarles cómo se llama el nombre de algunos animales bebés. Tengo una lista de 22 animales cada uno en un elemento div. Quiero que se reproduzca un audio predefinido para cada elemento div en el que se haga clic.

He intentado enumerar los dos primeros audios en una matriz, funciona bien cuando se hace clic en el primer elemento div. Pero cuando se hace clic en el segundo elemento div, ambos audios en la matriz se reproducen al mismo tiempo.

He leído algunas respuestas a algunas preguntas relacionadas aquí, pero no tengo una solución clara. También intenté usar variables para cada audio en lugar de ponerlas en una matriz y el problema no cambió. También intenté pausar cada sonido anterior mientras se dispara un nuevo sonido, pero sé que sería una parte detallada del código y podría haber una mejor manera de lograrlo.

Aquí está mi código, siento que hay algo que no estoy haciendo bien. Por favor, ayúdame. Gracias.

 <div class="container-fluid border"> <div class="cards-box row "> <div class="cards border animate__animated animate__fadeIn" id="card1" onclick="beer()">Beer</div> <div class="cards border " id="card2" style="display:none;" onclick="bee()">Bee</div> <div class="cards border " id="card3" style="display:none;" onclick="bird()">Bird</div> </div> </div> <script> var voiceOfSonia = [ new Audio("./audio-files/Beers.mp3"), new Audio("./audio-files/bee.mp3") ]; let clickSound = new Audio("./audio-files/click.wav"); let pix1 = document.getElementById("card1"); pix1.addEventListener("click", beer); let pix2 = document.getElementById("card2"); pix2.addEventListener("click", bee); function beer() { clickSound.play(); clickSound.volume = 0.3; clickSound.addEventListener("ended", function () { voiceOfSonia[0].play(); voiceOfSonia[0].volume = 0.5; voiceOfSonia[0].addEventListener("ended", function () { document.getElementById("card2").style.display = "block"; }); }); } function bee() { clickSound.play(); clickSound.volume = 0.3; clickSound.addEventListener("ended", function () { voiceOfSonia[1].play(); voiceOfSonia[1].volume = 0.5; voiceOfSonia[1].addEventListener("ended", function () { document.getElementById("card3").style.display = "block"; }); }); } </script>