用html写一个完整的音乐播放器
时间: 2023-09-07 10:12:48 浏览: 47
好的,以下是一个完整的HTML音乐播放器示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<style>
body {
font-family: Arial, sans-serif;
}
#player {
margin: 20px;
width: 300px;
}
#controls {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px;
width: 300px;
font-size: 18px;
}
#time {
margin: 0;
font-size: 14px;
}
</style>
</head>
<body>
<audio id="player" controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
<div id="controls">
<button id="prev"><</button>
<button id="play">▶</button>
<button id="next">></button>
<span id="time">0:00 / 0:00</span>
<input id="vol" type="range" min="0" max="1" step="0.1" value="1">
</div>
<script>
const audio = document.getElementById("player");
const playBtn = document.getElementById("play");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const timeSpan = document.getElementById("time");
const volRange = document.getElementById("vol");
let currentTrack = 0;
let tracks = [
{src: "music1.mp3", title: "Music 1"},
{src: "music2.mp3", title: "Music 2"},
{src: "music3.mp3", title: "Music 3"}
];
function updateTime() {
const currTime = audio.currentTime;
const duration = audio.duration;
timeSpan.textContent = `${formatTime(currTime)} / ${formatTime(duration)}`;
}
function formatTime(time) {
const min = Math.floor(time / 60);
const sec = Math.floor(time % 60).toString().padStart(2, "0");
return `${min}:${sec}`;
}
function prevTrack() {
currentTrack = (currentTrack - 1 + tracks.length) % tracks.length;
loadTrack();
}
function nextTrack() {
currentTrack = (currentTrack + 1) % tracks.length;
loadTrack();
}
function loadTrack() {
const track = tracks[currentTrack];
audio.src = track.src;
document.title = track.title;
updateTime();
play();
}
function play() {
audio.play();
playBtn.textContent = "⏸";
}
function pause() {
audio.pause();
playBtn.textContent = "▶";
}
function setVolume() {
audio.volume = volRange.value;
}
playBtn.addEventListener("click", () => audio.paused ? play() : pause());
prevBtn.addEventListener("click", prevTrack);
nextBtn.addEventListener("click", nextTrack);
audio.addEventListener("timeupdate", updateTime);
volRange.addEventListener("input", setVolume);
loadTrack();
</script>
</body>
</html>
```
这个示例中包括了音乐播放器的基本功能,包括播放/暂停、上一曲/下一曲、时间显示、音量控制等。我们还使用了CSS来美化播放器的样式。
在JavaScript代码中,我们定义了一个`tracks`数组来存储要播放的音乐列表,使用`currentTrack`变量来记录当前正在播放的音乐,使用`loadTrack`函数来加载音乐并更新相关信息。
我们还定义了一些辅助函数,如`updateTime`用于更新时间显示、`formatTime`用于格式化时间、`setVolume`用于设置音量等。
你可以根据实际需求来调整这个示例,例如添加更多的控制按钮、调整样式等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![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)