我们首先需要搭建基础的HTML结构。播放器的核心是<audio>标签，它提供了对音频文件的基本控制能力。围绕这个元素，我们构建播放控件、进度条、音量滑块和播放列表区域。

html

接下来是JavaScript部分，这是整个播放器的灵魂。我们定义一个MusicPlayer类来封装所有逻辑，确保代码结构清晰、易于维护。

javascript
class MusicPlayer {
constructor() {
this.audio = document.getElementById('audio');
this.playPauseBtn = document.getElementById('play-pause');
this.prevBtn = document.getElementById('prev');
this.nextBtn = document.getElementById('next');
this.progress = document.getElementById('progress');
this.currentTimeEl = document.getElementById('current-time');
this.durationEl = document.getElementById('duration');
this.volumeControl = document.getElementById('volume');
this.currentTrackEl = document.getElementById('current-track');
this.playlistEl = document.getElementById('playlist');

this.songs = [
  { title: '晴天', src: 'songs/qingtian.mp3' },
  { title: '七里香', src: 'songs/qilixiang.mp3' },
  { title: '稻香', src: 'songs/daoxiang.mp3' }
];

this.currentIndex = 0;

this.init();

}

init() {
this.loadSong();
this.renderPlaylist();
this.bindEvents();
}

loadSong() {
const song = this.songs[this.currentIndex];
this.audio.src = song.src;
this.currentTrackEl.textContent = 正在播放：${song.title};
this.updatePlayButton();
}

renderPlaylist() {
this.playlistEl.innerHTML = '';
this.songs.forEach((song, index) => {
const li = document.createElement('li');
li.textContent = song.title;
li.classList.add('playlist-item');
if (index === this.currentIndex) li.classList.add('active');
li.addEventListener('click', () => this.selectSong(index));
this.playlistEl.appendChild(li);
});
}

selectSong(index) {
this.currentIndex = index;
this.loadSong();
this.audio.play();
}

bindEvents() {
this.playPauseBtn.addEventListener('click', () => this.togglePlay());
this.prevBtn.addEventListener('click', () => this.prevSong());
this.nextBtn.addEventListener('click', () => this.nextSong());
this.audio.addEventListener('timeupdate', () => this.updateProgress());
this.audio.addEventListener('ended', () => this.nextSong());
this.progress.addEventListener('input', () => this.seek());
this.volumeControl.addEventListener('input', () => this.setVolume());

// 允许拖动进度条
this.progress.addEventListener('change', () => {
  this.audio.currentTime = this.progress.value;
});

}

togglePlay() {
if (this.audio.paused) {
this.audio.play();
} else {
this.audio.pause();
}
this.updatePlayButton();
}

updatePlayButton() {
this.playPauseBtn.textContent = this.audio.paused ? '▶️' : '⏸️';
}

prevSong() {
this.currentIndex = (this.currentIndex - 1 + this.songs.length) % this.songs.length;
this.loadSong();
this.audio.play();
}

nextSong() {
this.currentIndex = (this.currentIndex + 1) % this.songs.length;
this.loadSong();
this.audio.play();
}

updateProgress() {
const { currentTime, duration } = this.audio;
this.progress.max = duration || 0;
this.progress.value = currentTime;

this.currentTimeEl.textContent = this.formatTime(currentTime);
this.durationEl.textContent = duration ? this.formatTime(duration) : '0:00';

}

seek() {
this.audio.currentTime = this.progress.value;
}

setVolume() {
this.audio.volume = this.volumeControl.value;
}

formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return ${mins}:${secs < 10 ? '0' : ''}${secs};
}
}

// 启动播放器
document.addEventListener('DOMContentLoaded', () => {
new MusicPlayer();
});

这个播放器不仅实现了基本的播放控制，还包含了播放进度实时更新、时间格式化显示、音量调节和播放列表点击切换等功能。通过面向对象的方式组织代码，使得功能扩展变得简单。例如，未来可以轻松添加随机播放、循环模式、歌词同步或可视化波形等高级特性。

整个实现过程展示了如何利用HTML5 Audio API的强大能力，结合JavaScript事件系统与DOM操作，构建出响应迅速、用户体验良好的音频应用。关键在于状态的统一管理——当前播放索引、播放/暂停状态、进度值等都集中在类中维护，避免了全局变量污染和逻辑混乱。

通过这样的实践，开发者不仅能掌握音频处理的核心技术，还能深入理解前端组件化设计的思想。一个看似简单的播放器，背后蕴含着丰富的工程实践价值。