如何在html中点击一张图片播放声音
时间: 2024-03-23 22:43:56 浏览: 138
HTML+Javascript实现点击图片自动播放背景音乐
5星 · 资源好评率100%
要在HTML中点击一张图片播放声音,可以使用HTML5的<audio>标签和<img>标签结合。
首先,在HTML中定义一个<audio>标签,设置其音频文件路径:
```html
<audio id="myAudio">
<source src="audio.mp3" type="audio/mpeg">
</audio>
```
然后,在HTML中定义一个<img>标签,设置其图片路径,同时绑定一个JavaScript事件,当鼠标点击图片时触发播放音频:
```html
<img src="image.jpg" onclick="document.getElementById('myAudio').play()">
```
完整的代码如下:
```html
<audio id="myAudio">
<source src="audio.mp3" type="audio/mpeg">
</audio>
<img src="image.jpg" onclick="document.getElementById('myAudio').play()">
```
当用户点击图片时,音频文件将会自动播放。
阅读全文