我正在通过自己做一些小练习来学习 HTML-CSS-JS。我创建了一个小代码,当我单击图像时播放 mp3 音频:
<html>
<head>
<title>Image audio exercise</title>
</head>
<body>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
<img src="img.gif" onclick="play()">
<audio id="audio" src="sound.mp3" ></audio>
</body>
</html>
我希望当点击位于图像外部时能够播放不同的音频文件。有简单的方法吗?也许是 if-else 语句?
最佳答案
你可以做这样的事情。只需简单检查一下您是否单击了图像或文档。
<html>
<head>
<title>Image audio exercise</title>
</head>
<body>
<img id="theImage" src="img.gif">
<audio id="audio" src="sound.mp3" ></audio>
<script>
var audio = document.getElementById("audio");
var img = document.getElementById("theImage");
document.addEventListener("click", function(e){
if( e.target === img ){
audio.src = "sound.mp3";
audio.play();
}
else{
audio.src = "sound2.mp3";
audio.play();
}
},false);
</script>
</body>
</html>
关于javascript - 单击图像内部时播放音频文件,单击图像外部时播放不同的音频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42855542/