如何设置音频播放控件的样式,并实现切换界面音乐不会暂停
时间: 2024-01-24 15:05:05 浏览: 26
要设置音频播放控件的样式,可以使用CSS样式表来自定义控件的样式。audio标签提供了一些内置的控件属性,例如controls属性可以添加浏览器默认的音频控件,但是这些控件的样式非常难以自定义。因此,我们通常会自己设计控件的样式,然后使用JavaScript来控制音频的播放、暂停等操作。
以下是一个简单的示例,展示如何使用CSS样式和JavaScript来自定义音频控件的样式,并实现切换界面音乐不会暂停的功能:
```html
<!-- HTML代码 -->
<audio id="myAudio" src="music.mp3"></audio>
<div id="player">
<button id="playBtn" class="play"></button>
<div id="progressBar">
<div id="progress"></div>
</div>
</div>
```
```css
/* CSS样式表 */
#player {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background-color: #efefef;
padding: 10px;
}
#playBtn {
width: 40px;
height: 40px;
background-color: #ccc;
border: none;
outline: none;
cursor: pointer;
}
#playBtn.play {
background-image: url(play.png);
}
#playBtn.pause {
background-image: url(pause.png);
}
#progressBar {
width: 80%;
height: 10px;
background-color: #fff;
margin: 0 10px;
}
#progress {
width: 0%;
height: 100%;
background-color: #00bcd4;
}
```
```javascript
// JavaScript代码
var audio = document.getElementById("myAudio");
var playBtn = document.getElementById("playBtn");
var progress = document.getElementById("progress");
var progressBar = document.getElementById("progressBar");
playBtn.addEventListener("click", function() {
if (audio.paused) {
audio.play();
playBtn.classList.remove("play");
playBtn.classList.add("pause");
} else {
audio.pause();
playBtn.classList.remove("pause");
playBtn.classList.add("play");
}
});
audio.addEventListener("timeupdate", function() {
var currentTime = audio.currentTime;
var duration = audio.duration;
var progressPercent = (currentTime / duration) * 100;
progress.style.width = progressPercent + "%";
});
progressBar.addEventListener("click", function(event) {
var mouseX = event.clientX;
var progressBarX = progressBar.getBoundingClientRect().left;
var progressBarWidth = progressBar.offsetWidth;
var progressPercent = ((mouseX - progressBarX) / progressBarWidth) * 100;
audio.currentTime = (progressPercent / 100) * audio.duration;
});
```
这段代码创建了一个自定义的音频控件,包括一个播放按钮和一个进度条。使用CSS样式来设置控件的样式,使用JavaScript来控制音频的播放、暂停和进度条的更新。切换界面时,音乐不会暂停,因为音频元素是在页面中一直存在的,不会因为切换界面而被删除。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)