<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Music Player</title> <style> /* 样式可自行修改 */ .container { width: 600px; margin: 0 auto; } h2 { text-align: center; } .controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .progress { width: 400px; height: 10px; background-color: #ccc; } .progress-bar { height: 10px; background-color: #6cb0ff; } .info { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .song-info { margin-left: 20px; display: flex; flex-direction: column; } .song-info span { margin-bottom: 5px; } .song-list { list-style: none; padding: 0; } .song-list li { margin-bottom: 5px; cursor: pointer; } .song-list li.active { color: #6cb0ff; } .play-mode { display: flex; align-items: center; } .play-mode span { margin-right: 5px; } </style></head><body> <div class="container"> <h2>Music Player</h2> <div class="controls"> <button id="prev">上一首</button> <button id="play">播放</button> <button id="next">下一首</button> <div class="progress"> <div class="progress-bar"></div> </div> <input type="range" id="volume" min="0" max="1" step="0.1" value="0.5"> </div> <div class="info"> <img src="" alt="" id="cover"> <div class="song-info"> <span id="song-name">歌曲名称</span> <span id="artist">歌手</span> </div> </div> <ul class="song-list"> <li data-src="./music/song1.mp3">歌曲1</li> <li data-src="./music/song2.mp3">歌曲2</li> <li data-src="./music/song3.mp3">歌曲3</li> </ul> <div class="play-mode"> <span>播放模式：</span> <button id="loop">循环</button> <button id="random">随机</button> <button id="single">单曲</button> </div> </div> <script> const audio = new Audio(); // 创建音乐播放器对象 const songList = document.querySelectorAll('.song-list li'); const prevBtn = document.querySelector('#prev'); const playBtn = document.querySelector('#play'); const nextBtn = document.querySelector('#next'); const volumeSlider = document.querySelector('#volume'); const progressBar = document.querySelector('.progress-bar'); const coverImg = document.querySelector('#cover'); const songName = document.querySelector('#song-name'); const artistName = document.querySelector('#artist'); const loopBtn = document.querySelector('#loop'); const randomBtn = document.querySelector('#random'); const singleBtn = document.querySelector('#single'); let currentIndex = 0; let isPlaying = false; let playMode = 'loop'; // 默认播放模式为循环 function playSong(index) { const song = songList[index]; audio.src = song.dataset.src; audio.play(); isPlaying = true; playBtn.textContent = '暂停'; coverImg.src = `./images/cover${index+1}.jpg`; songName.textContent = song.textContent; artistName.textContent = '歌手名称'; songList.forEach((item) => { item.classList.remove('active'); }); song.classList.add('active'); } function getNextIndex() { let nextIndex; switch(playMode) { case 'loop': nextIndex = currentIndex + 1; if (nextIndex >= songList.length) { nextIndex = 0; } break; case 'random': nextIndex = Math.floor(Math.random() * songList.length); break; case 'single': nextIndex = currentIndex; break; } return nextIndex; } function updateProgress() { const progress = audio.currentTime / audio.duration * 100; progressBar.style.width = `${progress}%`; } function init() { playSong(currentIndex); } init(); prevBtn.addEventListener('click', () => { currentIndex--; if (currentIndex < 0) { currentIndex = songList.length - 1; } playSong(currentIndex); }); nextBtn.addEventListener('click', () => { currentIndex = getNextIndex(); playSong(currentIndex); }); playBtn.addEventListener('click', () => { if (isPlaying) { audio.pause(); isPlaying = false; playBtn.textContent = '播放'; } else { audio.play(); isPlaying = true; playBtn.textContent = '暂停'; } }); volumeSlider.addEventListener('input', () => { audio.volume = volumeSlider.value; }); audio.addEventListener('timeupdate', updateProgress); progressBar.addEventListener('click', (e) => { const width = progressBar.clientWidth; const clickX = e.offsetX; const duration = audio.duration; audio.currentTime = clickX / width * duration; }); songList.forEach((song, index) => { song.addEventListener('click', () => { currentIndex = index; playSong(currentIndex); }); }); loopBtn.addEventListener('click', () => { playMode = 'loop'; }); randomBtn.addEventListener('click', () => { playMode = 'random'; }); singleBtn.addEventListener('click', () => { playMode = 'single'; }); audio.addEventListener('ended', () => { currentIndex = getNextIndex(); playSong(currentIndex); }); </script></body></html> 这个实现了基本的播放/暂停、歌曲切换、音量控制、进度条控制和显示歌曲信息等功能，同时还支持播放模式切换和歌曲列表操作。不过这只是一个简单的示例，实际上还有很多功能需要进一步完善和优化，例如：
支持歌词显示和同步支持播放列表编辑和保存支持拖拽上传歌曲支持在线搜索歌曲支持分享和评论等社交功能这些功能的实现需要涉及到不同的技术和工具，如 AJAX、WebSocket、React、Node.js 等。如果你想要深入学习和掌握 Web 开发技术，可以选择相应的学习路径和教程进行学习。