Javascript 如何播放每个活动的不同声音文件

我是javaScript新手，需要让我的闪存卡在翻转时播放相应的声音我用简单的css翻转它们，但我无法让javaScript正常工作 这是我的密码

    body{
    background-image: url(../jpg/iconic-jacquard-towel-mountain-majesty-bath-towel-832373.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    align-content: justify;
}
.flip3d{
width: 240px;
height: 200px;
margin: 10px;
float: left;
-webkit-box-shadow: inset 0px 0px;
box-shadow: inset 0px 0px;
}
.flip3d>.front{
position: absolute;
-webkit-transform: perspective( 800px ) rotateY( 0deg );
transform: perspective( 800px ) rotateY( 0deg );
background: #24C7BF;
width: 240px;
height: 200px;
border-radius: 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
box-shadow: 10px 10px 11px #F7F2F2;
-webkit-box-shadow: 10px 10px 11px #F7F2F2;
}
    .flip3d>.back{
position: absolute;
-webkit-transform: perspective(800px) rotateY( 180deg);
transform: perspective(800px) rotateY( 180deg);
background: #8376F0;
width: 240px;
height: 200px;
border-radius: 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
text-align: center;
font-size: 24px;
box-shadow: -10px 10px 11px #8A8A8A;
-webkit-box-shadow: -10px 10px 11px #8A8A8A;
}
.flip3d:hover > .front{
    -webkit-transform: perspective( 800px ) rotateY( -180deg);
    transform: perspective( 600px ) rotateY( -180deg);
}
    .flip3d:hover > .back{
    -webkit-transform: perspective( 800px ) rotateY( 0deg); 
    transform: perspective( 600px ) rotateY( 0deg);
}
p{
    padding:60px;
}

这是我的剧本

   function play(audio1){
var audio = document.getElementById("audio1");
audio.play();
         }
   function play(audio2){
var audio = document.getElementById("audio2");
 audio.play();}

这是我的卡片html

<div class="flip3d">
<div value="play" onMouseOver="play(audio1);" onMouseOut="stop();" class="back"><p>Mshiimin maaba</p>
<audio id="audio1" src="../../soundbites/Giigoon.mp3"></audio>
</div>
<div class="front"><img src="pics/Apple-Fruit-PNG-File.png" width="200px" height="200px" alt="red apple"/></div>
</div>
<div class="flip3d">
<div value="play" onMouseOver="play(audio2);" onMouseOut="stop();" class="back"><p>Emtigoonhsibigak maaba</p>
<audio id="audio2" src="../../soundbites/Jidmoonh.mp3"></audio>
</div>
<div class="front"><img src="pics/Broccoli-PNG-File.png" width="210px" height="200px" alt="broccoli"/></div>
</div>

姆希伊明·马巴

Emtigoonhsibigak maaba

---

所以我想让它做的是翻转卡片，用声音文件说出单词，每个卡片都有一个不同的声音文件，希望它们只在翻转到背面时发出声音。在js中，你有两个相同的函数，传递不同的参数，第二个函数不起作用，因为它有相同的名称，您可以对这两个元素使用相同的函数，只传递音频元素的id名称，如下所示：

function play($audio) {
  var audio = document.getElementByID($audio);
  audio.play()
}

在html to onMouseOver事件中，使用音频的id名称传递上述函数，例如

onMouseOver=“play（'audio2'）；”

这是完整的代码：

<div class="flip3d">
<div value="play" onMouseOver="play('audio1');" onMouseOut="stop();" class="back"><p>Mshiimin maaba</p>
<audio id="audio1" src="../../soundbites/Giigoon.mp3"></audio>
</div>
<div class="front"><img src="pics/Apple-Fruit-PNG-File.png" width="200px" height="200px" alt="red apple"/></div>
</div>
<div class="flip3d">
<div value="play" onMouseOver="play('audio2');" onMouseOut="stop();" class="back"><p>Emtigoonhsibigak maaba</p>
<audio id="audio2" src="../../soundbites/Jidmoonh.mp3"></audio>
</div>
<div class="front"><img src="pics/Broccoli-PNG-File.png" width="210px" height="200px" alt="broccoli"/></div>
</div>

姆希伊明·马巴

Emtigoonhsibigak maaba

---

让我知道它是否有意义，是否有效。

在js中，您有两个相同的函数，传递不同的参数，第二个函数不起作用，因为它具有相同的名称，您可以对这两个函数使用相同的函数，只传递音频元素的id名称，如下所示：

function play($audio) {
  var audio = document.getElementByID($audio);
  audio.play()
}

在html to onMouseOver事件中，使用音频的id名称传递上述函数，例如

onMouseOver=“play（'audio2'）；”

这是完整的代码：

<div class="flip3d">
<div value="play" onMouseOver="play('audio1');" onMouseOut="stop();" class="back"><p>Mshiimin maaba</p>
<audio id="audio1" src="../../soundbites/Giigoon.mp3"></audio>
</div>
<div class="front"><img src="pics/Apple-Fruit-PNG-File.png" width="200px" height="200px" alt="red apple"/></div>
</div>
<div class="flip3d">
<div value="play" onMouseOver="play('audio2');" onMouseOut="stop();" class="back"><p>Emtigoonhsibigak maaba</p>
<audio id="audio2" src="../../soundbites/Jidmoonh.mp3"></audio>
</div>
<div class="front"><img src="pics/Broccoli-PNG-File.png" width="210px" height="200px" alt="broccoli"/></div>
</div>

姆希伊明·马巴

Emtigoonhsibigak maaba

---

让我知道它是否有意义，是否有效。

现在它只会播放所有cardsJaVaScRiPt不是JaVa上的第一个声音文件。现在它只会播放所有cardsJaVaScRiPt不是JaVa上的第一个声音文件。