如何獲取播放每個事件的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> 

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