不需要控制按钮
时间: 2023-09-04 20:11:48 浏览: 44
如果你不需要控制按钮,你可以尝试下面的代码,它只显示音乐播放器的进度和音量控制条:
```html
<div id="audio-player" style="position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: #fff; padding: 10px;">
<audio id="music" src="path/to/music.mp3"></audio>
<div style="display: flex; align-items: center;">
<div style="flex: 1;">
<input id="progress-slider" type="range" min="0" max="1" step="0.01" value="0" style="width: 100%;">
</div>
<div style="width: 50px; margin-left: 10px;">
<input id="volume-slider" type="range" min="0" max="1" step="0.1" value="1" style="width: 100%;">
</div>
</div>
</div>
<script>
var music = document.getElementById("music");
var progressSlider = document.getElementById("progress-slider");
var volumeSlider = document.getElementById("volume-slider");
function updateProgress() {
progressSlider.value = music.currentTime / music.duration;
}
function updateVolume() {
music.volume = volumeSlider.value;
}
progressSlider.addEventListener("input", function() {
music.currentTime = music.duration * progressSlider.value;
});
volumeSlider.addEventListener("input", updateVolume);
music.addEventListener("timeupdate", updateProgress);
music.addEventListener("ended", function() {
music.currentTime = 0;
progressSlider.value = 0;
});
</script>
```
同样地,你需要将 `path/to/music.mp3` 替换为你的音乐文件路径,并将这段代码嵌入到你的网页中。这段代码只会显示两个控制条,一个用于调整音乐的音量,另一个用于调整音乐的播放进度。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)