如何用JavaScript实现MP3数组随机播放、懒加载及播放暂停功能

需求回顾 #

• 单个播放/暂停按钮，点击切换播放状态
• 多首歌曲随机循环播放，当前歌曲结束自动切换下一首随机曲
• 支持约70首MP3的大规模列表，实现懒加载——仅在轮到该歌曲播放时才加载资源

完整实现代码 #

<!-- 音频元素：初始不设置src，preload设为none实现懒加载 -->
<audio id="myAudio" preload="none"></audio>
<!-- 用button标签更符合播放按钮的语义 -->
<button onclick="togglePlay()" id="playBtn">Play Music</button>

<script>
// 音乐列表：直接扩展添加你的70首MP3路径即可
const musicList = [
  'bg1.mp3',
  'bg2.mp3',
  'bg3.mp3',
  'bg4.mp3'
  // ... 这里继续添加其他MP3文件路径
];

const audio = document.getElementById('myAudio');
const playBtn = document.getElementById('playBtn');
let isPlaying = false;
let currentIndex = -1; // 记录当前播放歌曲的索引，初始-1表示未播放任何歌曲

// 切换播放/暂停状态的核心函数
function togglePlay() {
  if (isPlaying) {
    audio.pause();
  } else {
    // 如果是第一次播放，先随机加载一首歌曲
    if (currentIndex === -1) {
      loadRandomSong();
    }
    audio.play();
  }
}

// 懒加载随机歌曲：仅在需要播放时才设置src触发加载
function loadRandomSong() {
  let newIndex;
  // 避免连续播放同一首歌（当列表歌曲数大于1时生效）
  do {
    newIndex = Math.floor(Math.random() * musicList.length);
  } while (newIndex === currentIndex && musicList.length > 1);
  
  currentIndex = newIndex;
  // 设置音频src，此时浏览器才会开始加载该MP3文件
  audio.src = musicList[currentIndex];
}

// 监听播放状态，同步按钮文字和状态变量
audio.onplaying = function() {
  isPlaying = true;
  playBtn.textContent = 'Pause Music';
};

audio.onpause = function() {
  isPlaying = false;
  playBtn.textContent = 'Play Music';
};

// 当前歌曲播放完毕后，自动加载下一首并继续播放
audio.onended = function() {
  if (isPlaying) { // 只有在播放状态下才自动续播
    loadRandomSong();
    audio.play();
  }
};
</script>

关键逻辑说明 #

• 懒加载核心：音频元素初始设置preload="none"且不指定src，只有当要播放该歌曲时才通过audio.src赋值，浏览器才会加载对应的MP3，完全避免一次性加载70首的性能问题
• 随机切歌优化：生成随机索引时增加了判断，不会连续播放同一首歌，提升体验
• 状态同步：通过音频的onplaying和onpause事件实时更新按钮文字和isPlaying变量，确保按钮状态和播放状态一致
• 自动续播：监听onended事件，歌曲播放完毕后自动触发下一首的加载和播放，保持音乐不间断

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