html - 单击图像时如何播放音频？

我有一个学校项目，不能使用Java，只能使用HTML和CSS。主题是Lucky Luke，我想在单击图像时播放音频。

我的想法是在单击图像时播放音频。

<div id="luckyShoot">
    <img src="images/lucky_luke_shooting.png">
</div>

<div id="song">
    <audio>
    <source src="audio/soundtrack.wav" type="audio/wav">
    </audio>
</div>

最佳答案

有趣的问题。

这是你的解决方案

示例和演示：

只要您在Chrome浏览器中对其进行测试，以下代码就会在该图片上点击并发出马的声音。

div#lH {
  position: absolute;
  width: 30px;
  height: 30px;
  overflow: hidden;
  z-index: 1;
  font-size: 25px;
  text-align:center;
}
audio#aH {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 2;
  opacity: 0.01;
}

 <div id="lH">
<audio controls id="aH">
  <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="https://static.rfstat.com/bloggers_folders/user_50017/my_media/184c7a0c-9df2-451e-8e4b-759c30eb5453.png" />
</div>

您可以编辑或预览代码Here on JSFiddle

关于html - 单击图像时如何播放音频？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58340624/