如何用JavaScript实现本地多首MP3音乐播放列表？

Hey Cody, 我刚好折腾过类似的本地音乐播放列表功能，给你一套用原生HTML5 Audio API实现的方案，不用依赖任何第三方库，简单可靠，完全能满足你3首及以上本地音乐的播放需求。

1. 先搭好基础HTML结构 #

先把播放器核心、播放列表和控制按钮的骨架写出来，结构清晰好维护：

<!-- 音频播放器核心（自带基础控制条，也可以自己自定义） -->
<audio id="audioPlayer" controls></audio>

<!-- 播放列表区域 -->
<div class="playlist-container">
  <h3>我的播放列表</h3>
  <ul id="songList">
    <!-- 列表项会通过JS动态生成，也可以手动写死，看你习惯 -->
  </ul>
</div>

<!-- 自定义控制按钮（可选，嫌原生控制条丑的话用这个） -->
<div class="custom-controls">
  <button id="prevBtn">⏮️ 上一首</button>
  <button id="playPauseBtn">▶️ 播放</button>
  <button id="nextBtn">⏭️ 下一首</button>
</div>

2. 用JavaScript实现核心逻辑 #

这部分是关键，要处理歌曲加载、切换、自动循环这些功能，我给你写了完整的可直接用的代码，注释很清楚：

// 第一步：定义你的本地音乐列表，路径要和网站文件结构对应
// 比如把音乐放在根目录的music文件夹下，路径就是./music/xxx.mp3
const songs = [
  { name: "夏夜晚风", url: "./music/song1.mp3" },
  { name: "橘子汽水", url: "./music/song2.mp3" },
  { name: "海芋恋", url: "./music/song3.mp3" },
  // 想加多少首就继续往数组里加
];

// 获取页面上的DOM元素
const audioPlayer = document.getElementById('audioPlayer');
const songList = document.getElementById('songList');
const playPauseBtn = document.getElementById('playPauseBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

let currentSongIndex = 0; // 记录当前播放的歌曲索引

// 初始化播放列表：把歌曲数组渲染成页面上的列表项
function initPlaylist() {
  songs.forEach((song, index) => {
    const li = document.createElement('li');
    li.textContent = song.name;
    li.style.cursor = 'pointer';
    // 点击列表项直接跳转到对应歌曲播放
    li.addEventListener('click', () => {
      currentSongIndex = index;
      loadCurrentSong();
      playSong();
    });
    songList.appendChild(li);
  });
}

// 加载当前选中的歌曲
function loadCurrentSong() {
  // 高亮当前播放的歌曲（可选，提升体验）
  document.querySelectorAll('.playlist-container li').forEach(item => item.classList.remove('active'));
  document.querySelectorAll('.playlist-container li')[currentSongIndex].classList.add('active');
  
  audioPlayer.src = songs[currentSongIndex].url;
  // 可选：更新页面标题显示当前歌曲名
  document.title = `正在播放：${songs[currentSongIndex].name}`;
}

// 播放歌曲
function playSong() {
  audioPlayer.play();
  playPauseBtn.textContent = '⏸️ 暂停';
}

// 暂停歌曲
function pauseSong() {
  audioPlayer.pause();
  playPauseBtn.textContent = '▶️ 播放';
}

// 切换到上一首
function goToPrevSong() {
  // 用取模实现循环：第一首的上一首是最后一首
  currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
  loadCurrentSong();
  playSong();
}

// 切换到下一首
function goToNextSong() {
  // 取模实现循环：最后一首的下一首是第一首
  currentSongIndex = (currentSongIndex + 1) % songs.length;
  loadCurrentSong();
  playSong();
}

// 监听歌曲播放结束事件，自动播放下一首（实现列表循环）
audioPlayer.addEventListener('ended', goToNextSong);

// 绑定按钮点击事件
playPauseBtn.addEventListener('click', () => {
  audioPlayer.paused ? playSong() : pauseSong();
});
prevBtn.addEventListener('click', goToPrevSong);
nextBtn.addEventListener('click', goToNextSong);

// 页面加载完成后初始化播放列表
window.addEventListener('DOMContentLoaded', () => {
  initPlaylist();
  loadCurrentSong();
  // 注意：现在大部分浏览器禁止无用户交互的自动播放
  // 如果想打开网站就播放，需要引导用户先点击页面（比如加个提示）
  // 或者把playSong()放在用户第一次点击事件里，比如点击页面任意位置播放
  // document.body.addEventListener('click', () => playSong(), { once: true });
});

3. 几个关键注意事项要记牢 #

• 本地文件路径别写错：一定要保证MP3文件的路径和代码里的url一致，比如把所有音乐放在网站根目录的music文件夹下，路径就是./music/xxx.mp3，如果是子目录要对应调整。
• 浏览器自动播放限制：现在Chrome、Firefox等主流浏览器都禁止无用户交互的自动播放音频，所以如果想打开网站就播放，最好加个“点击页面开始播放”的提示，或者把播放触发逻辑绑定到用户第一次点击事件上（代码里我加了注释示例）。
• 样式美化（可选）：可以加几行CSS让播放列表更好看，比如给当前播放的歌曲加个背景色：

.playlist-container li.active {
  background-color: #e0e0e0;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
}
.custom-controls button {
  margin: 0 8px;
  padding: 6px 12px;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Cody Tong