用js写实现音乐播放器
基础音乐播放器实现
创建一个简单的HTML结构，包含播放/暂停按钮、进度条和音量控制。
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<style>
.player {
width: 300px;
padding: 20px;
background: #f5f5f5;
border-radius: 10px;
}
.controls {
display: flex;
align-items: center;
margin-top: 10px;
}
.progress-container {
width: 100%;
height: 5px;
background: #ddd;
margin: 10px 0;
}
.progress {
height: 100%;
background: #4CAF50;
width: 0%;
}
</style>
</head>
<body>
<div class="player">
<audio id="audio" src="your-music-file.mp3"></audio>
<div class="progress-container">
<div class="progress" id="progress"></div>
</div>
<div class="controls">
<button id="playBtn">播放</button>
<input type="range" id="volume" min="0" max="1" step="0.1" value="0.7">
</div>
</div>
<script src="player.js"></script>
</body>
</html>JavaScript核心功能实现
在player.js文件中添加以下代码实现基本播放控制：
const audio = document.getElementById('audio');
const playBtn = document.getElementById('playBtn');
const progress = document.getElementById('progress');
const volumeControl = document.getElementById('volume');
// 播放/暂停切换
playBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playBtn.textContent = '暂停';
} else {
audio.pause();
playBtn.textContent = '播放';
}
});
// 更新进度条
audio.addEventListener('timeupdate', () => {
const percentage = (audio.currentTime / audio.duration) * 100;
progress.style.width = percentage + '%';
});
// 点击进度条跳转
document.querySelector('.progress-container').addEventListener('click', (e) => {
const width = e.target.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
});
// 音量控制
volumeControl.addEventListener('input', () => {
audio.volume = volumeControl.value;
});增强功能实现
添加播放列表和歌曲信息显示功能：
// 播放列表
const playlist = [
{ title: '歌曲1', src: 'song1.mp3' },
{ title: '歌曲2', src: 'song2.mp3' },
{ title: '歌曲3', src: 'song3.mp3' }
];
let currentTrack = 0;
const songTitle = document.createElement('div');
songTitle.className = 'song-title';
document.querySelector('.player').prepend(songTitle);
// 加载歌曲
function loadTrack(index) {
audio.src = playlist[index].src;
songTitle.textContent = playlist[index].title;
audio.play();
playBtn.textContent = '暂停';
}
// 下一首/上一首控制
const nextBtn = document.createElement('button');
nextBtn.textContent = '下一首';
const prevBtn = document.createElement('button');
prevBtn.textContent = '上一首';
document.querySelector('.controls').prepend(prevBtn);
document.querySelector('.controls').appendChild(nextBtn);
nextBtn.addEventListener('click', () => {
currentTrack = (currentTrack + 1) % playlist.length;
loadTrack(currentTrack);
});
prevBtn.addEventListener('click', () => {
currentTrack = (currentTrack - 1 + playlist.length) % playlist.length;
loadTrack(currentTrack);
});
// 歌曲结束时自动播放下一首
audio.addEventListener('ended', () => {
nextBtn.click();
});
// 初始化加载第一首歌
loadTrack(0);响应式设计改进
添加CSS媒体查询使播放器适应不同屏幕尺寸：
@media (max-width: 600px) {
.player {
width: 90%;
}
.controls button {
padding: 8px 12px;
}
}高级功能扩展
实现歌词同步显示功能（需要LRC格式歌词文件）：
// 假设有歌词数据
const lyrics = [
{ time: 0, text: '歌词第一行' },
{ time: 5, text: '歌词第二行' },
// 更多歌词...
];
const lyricsDisplay = document.createElement('div');
lyricsDisplay.className = 'lyrics';
document.querySelector('.player').appendChild(lyricsDisplay);
audio.addEventListener('timeupdate', () => {
// 更新进度条的代码...
// 更新歌词显示
const currentTime = audio.currentTime;
for (let i = 0; i < lyrics.length; i++) {
if (currentTime >= lyrics[i].time &&
(i === lyrics.length - 1 || currentTime < lyrics[i+1].time)) {
lyricsDisplay.textContent = lyrics[i].text;
break;
}
}
});这个实现包含了音乐播放器的基本功能，可以根据需要进一步扩展添加更多高级功能如均衡器、音效设置、播放模式切换等。
