comment se rendre à diff fichiers sonores pour chaque événement

Question

Je suis nouveau à javaScript et besoin de faire mes cartes flash jouer le son correspondant lorsqu'il est retourné je les retourner avec css simple, mais je ne peux pas obtenir le javaScript pour fonctionner correctement est ici mon code

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; 
} 

c'est mon script

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

c'est mon html pour les cartes

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

alors ce que je veux faire est de retourner la carte et dire le mot avec le fichier son que j'ai chaque carte aura un fichier sonore différent et voudrait qu'ils ne font que le son lorsqu'il est retourné à l'arrière

Answer 1

dans js vous avez deux mêmes fonctions avec passage différents paramètres, deuxième fonction ne fonctionnerait pas car il a le même nom, vous pouvez utiliser même fonction pour les deux et passer juste id nom de l'élément audio comme suit:

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

Dans l'événement html to onMouseOver, passez la fonction ci-dessus avec le nom d'identifiant de l'audio, par exemple onMouseOver="play('audio2');"

Ce code complet est:

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

Laissez-moi savoir s'il est logique et si cela fonctionne.