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 for the cards

<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名称如下：

l = [0,1,2,3,4,5,6,7,8,9]
print(l[4:7]) # [4, 5, 6]

在html to onMouseOver事件中传递上面的函数，其中包含音频的id名称，例如function play($audio) { var audio = document.getElementByID($audio); audio.play() }

这是完整的代码：

onMouseOver="play('audio2');"

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

如何为每个事件播放差异声音文件

1 个答案: