悬停图像时需要播放两种不同的声音?

Question

我是JavaScript，CSS和HTML的初学者。我在一个包的顶部有两个图像，我想在悬停时播放两种不同的声音。但是，当我将鼠标悬停在任一图像上时，它们会播放相同的声音。我想知道我做错了什么以及如何让图像播放两种不同的声音。谢谢！！！

<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
<img src="Photos/crowabout.png" height="150" width="150" value="PLAY"  
onmouseover="play()" onmouseout="stop()">
<audio id="audio" src="Sounds/divers.mp3" ></audio>

<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
<img src="Photos/harptour.png" height="150" width="150" value="PLAY"  onmouseover="play()" onmouseout="stop()">
<audio id="audio" src="Sounds/cosmia.mp3" ></audio> 

Answer 1

通常，id 属性应始终是唯一的。

id 全局属性定义一个唯一标识符 (ID(，该标识符在整个文档中必须是唯一的。

参考： https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

在你的代码中，Javascript 无法知道要播放哪个音频元素，因为两者都具有相同的 id。相反，请确保两者都具有唯一的 ID：

<audio id="audio1" src="Sounds/divers.mp3" ></audio>
<audio id="audio2" src="Sounds/cosmia.mp3" ></audio>

Javascript函数可以包含参数。这是一种将其他信息传递给函数以使用的方法：

function play(id){
var audio = document.getElementById(id);
audio.play();
}

现在，您的播放函数具有参数 ID。因此，我们可以在调用函数时传递正确的id来播放：

play('audio1');
play('audio2');

最后，您的脚本应如下所示：

<script type="text/javascript">
function play(id){
var audio = document.getElementById(id);
audio.play();
}
</script>
<img src="Photos/crowabout.png" style="width: 150px; height: 150px;" value="PLAY" onmouseover="play('audio1');" onmouseout="stop();">
<audio id="audio1" src="Sounds/divers.mp3"></audio>
<img src="Photos/harptour.png" style="width: 150px; height: 150px;" value="PLAY"  onmouseover="play('audio2');" onmouseout="stop()">
<audio id="audio2" src="Sounds/cosmia.mp3"></audio>

Answer 2

您可以将参数传递到play()函数中。

function play(selector){
document.getElementById(selector).play();
}

然后，将不同的id分配给不同的<audio>：

<audio id="anID" src="Sounds/divers.mp3" ></audio>
<audio id="anotherID" src="Sounds/cosmia.mp3" ></audio>

然后，在内联函数调用中：

<img src="Photos/crowabout.png" height="150" width="150" value="PLAY"  
onmouseover="play('anID')" onmouseout="stop()">
<img src="Photos/crowabout.png" height="150" width="150" value="PLAY"  
onmouseover="play('anotherID')" onmouseout="stop()">

通常，我们不会为超过 1 个元素分配相同的id，因为它就像元素的身份，类似于我们的身份证号码，其中每个人都有一个唯一的号码。

函数的参数类似于特定函数的预定义变量。与通常的变量声明var bla = 'bla'不同，函数参数的值是在调用函数时给出的，就像你在上面看到的play('audio1')一样。

Answer 3

试试这个：

<script>
function playDriver(){
var audio = document.getElementById("audio-driver");
audio.play();
}
function playCosmia(){
var audio = document.getElementById("audio-cosmia");
audio.play();
}
</script>
<img src="Photos/crowabout.png" height="150" width="150" value="PLAY"  
onmouseover="playDriver()" onmouseout="stop()">
<audio id="audio-driver" src="Sounds/divers.mp3" ></audio>
<img src="Photos/harptour.png" height="150" width="150" value="PLAY"  onmouseover="playCosmia()" onmouseout="stop()">
<audio id="audio-cosmia" src="Sounds/cosmia.mp3" ></audio>