HTML实现简单的点击播放和暂停音乐
时间: 2024-05-07 22:23:33 浏览: 16
可以使用HTML5的`<audio>`标签来实现简单的点击播放和暂停音乐。
首先,在HTML中添加一个`<audio>`标签,指定音频文件的URL和控制属性:
```html
<audio src="music.mp3" controls></audio>
```
其中,`src`属性指定音频文件的URL,`controls`属性表示显示音频控制器,包括播放/暂停按钮、音量控制等。
然后,可以使用JavaScript来控制音频的播放和暂停。给`<audio>`标签添加一个`id`属性,方便在JavaScript中获取该元素,比如:
```html
<audio id="myAudio" src="music.mp3" controls></audio>
```
接下来,在JavaScript中获取该元素,添加事件监听器,实现点击播放和暂停功能:
```javascript
var audio = document.getElementById("myAudio");
audio.addEventListener("click", function() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});
```
这段代码中,`addEventListener`方法添加了一个`click`事件监听器,当用户点击`<audio>`标签时触发。`if`语句判断当前音频是否暂停,如果是,则调用`play`方法播放音频;否则,调用`pause`方法暂停音频。
完整的HTML代码如下:
```html
<audio id="myAudio" src="music.mp3" controls></audio>
<script>
var audio = document.getElementById("myAudio");
audio.addEventListener("click", function() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});
</script>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)