JavaScript对按钮操作控制音频播放代码
时间: 2024-03-06 17:47:00 浏览: 39
下面是一个简单的示例代码,使用 JavaScript 控制按钮操作,控制音频的播放和暂停。
HTML 代码:
```html
<audio id="audio" src="music.mp3"></audio>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
```
JavaScript 代码:
```javascript
// 获取音频元素和按钮元素
var audio = document.getElementById("audio");
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
// 给按钮添加点击事件
playBtn.addEventListener("click", function() {
audio.play(); // 播放音频
});
pauseBtn.addEventListener("click", function() {
audio.pause(); // 暂停音频
});
```
该代码会在页面加载完成后,获取音频元素和按钮元素,并给按钮添加点击事件。点击“播放”按钮时,会调用音频元素的 `play()` 方法,开始播放音频;点击“暂停”按钮时,会调用音频元素的 `pause()` 方法,暂停音频的播放。
需要注意的是,浏览器可能会阻止自动播放音频,因此最好提供一个手动播放的按钮。另外,在代码中可以添加一些逻辑判断,例如判断音频是否已经在播放中,避免重复播放等问题。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)