如何获取播放每个事件的diff声音文件

Question

我是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> 

所以我想要它做的是翻转卡，并说声音文件，我有每个卡将具有不同的声音文件，并希望他们只能使声音翻转到背面

Answer 1

在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> 

让我知道，如果它是有道理的，如果它的工作原理。