使用js写一段音乐播放器程序
时间: 2023-03-29 17:03:22 浏览: 102
好的,以下是一段使用 JavaScript 编写的音乐播放器程序:
```javascript
// 获取 DOM 元素
const audio = document.querySelector('audio');
const playBtn = document.querySelector('.play');
const pauseBtn = document.querySelector('.pause');
const stopBtn = document.querySelector('.stop');
const volumeSlider = document.querySelector('.volume-slider');
const progressSlider = document.querySelector('.progress-slider');
const currentTime = document.querySelector('.current-time');
const totalTime = document.querySelector('.total-time');
// 播放按钮点击事件
playBtn.addEventListener('click', () => {
audio.play();
});
// 暂停按钮点击事件
pauseBtn.addEventListener('click', () => {
audio.pause();
});
// 停止按钮点击事件
stopBtn.addEventListener('click', () => {
audio.pause();
audio.currentTime = ;
});
// 音量滑块改变事件
volumeSlider.addEventListener('input', () => {
audio.volume = volumeSlider.value;
});
// 进度条滑块改变事件
progressSlider.addEventListener('input', () => {
audio.currentTime = progressSlider.value;
});
// 播放时间更新事件
audio.addEventListener('timeupdate', () => {
// 更新进度条滑块位置
progressSlider.value = audio.currentTime;
// 更新当前时间显示
currentTime.textContent = formatTime(audio.currentTime);
});
// 音频元数据加载完成事件
audio.addEventListener('loadedmetadata', () => {
// 设置总时间显示
totalTime.textContent = formatTime(audio.duration);
});
// 格式化时间函数
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '' : ''}${seconds}`;
}
```
这段代码实现了一个简单的音乐播放器,包括播放、暂停、停止、音量控制、进度控制等功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)