这里给你一套完美适配需求的方案，兼顾多音频随机切换、懒加载优化和单按钮播放/暂停逻辑，完全适配70个MP3文件的场景：

完整实现代码 #

HTML部分 #

<audio id="myAudio" preload="metadata"></audio>
<button id="toggleBtn">Play Music</button>

JavaScript部分 #

// 音频文件路径数组，可扩展至70个MP3
const musicFiles = [
  'bg1.mp3',
  'bg2.mp3',
  'bg3.mp3',
  'bg4.mp3'
  // 在此继续添加其余MP3路径
];

const audio = document.getElementById('myAudio');
const toggleBtn = document.getElementById('toggleBtn');
let isPlaying = false;
let currentIndex = -1; // 初始无当前播放歌曲

// 随机选择下一首歌曲（可选排除当前歌曲，避免重复播放）
function getRandomIndex() {
  let newIndex;
  do {
    newIndex = Math.floor(Math.random() * musicFiles.length);
  } while (musicFiles.length > 1 && newIndex === currentIndex); // 当数组长度>1时，不重复选当前歌曲
  return newIndex;
}

// 加载指定索引的歌曲并播放
function loadAndPlay(index) {
  currentIndex = index;
  audio.src = musicFiles[index];
  // 处理可能的播放错误（如浏览器自动播放限制、文件路径错误）
  audio.play().catch(err => console.error('播放失败:', err));
}

// 播放/暂停切换逻辑
function togglePlay() {
  if (!isPlaying) {
    // 首次播放时随机选择一首加载
    if (currentIndex === -1) {
      const randomIndex = getRandomIndex();
      loadAndPlay(randomIndex);
    } else {
      audio.play();
    }
    toggleBtn.textContent = 'Pause Music';
  } else {
    audio.pause();
    toggleBtn.textContent = 'Play Music';
  }
}

// 同步播放状态
audio.onplaying = () => {
  isPlaying = true;
};

audio.onpause = () => {
  isPlaying = false;
};

// 当前音频结束后自动播放下一首随机歌曲
audio.onended = () => {
  const nextIndex = getRandomIndex();
  loadAndPlay(nextIndex);
};

// 绑定按钮点击事件
toggleBtn.addEventListener('click', togglePlay);

核心功能详解 #

1. 懒加载优化（适配70个MP3场景） #

• 初始audio元素不设置src，避免一次性加载所有音频文件
• 仅在需要播放时（首次点击按钮或当前音频结束）才设置对应MP3的src，浏览器会按需加载该文件
• preload="metadata"让浏览器仅加载音频基本信息（如时长），而非完整音频内容，大幅减少初始加载压力

2. 多音频随机切换 #

• 通过getRandomIndex函数随机选择下一首歌曲，可选逻辑避免重复播放当前歌曲（当音频数组长度大于1时）
• 监听ended事件，当前音频播放完毕后自动触发下一首加载与播放

3. 单按钮控制逻辑 #

• 按钮文本随播放状态动态切换（Play/Pause），提升用户体验
• 处理首次播放的边界情况：第一次点击按钮时自动随机加载并播放第一首歌曲

4. 错误处理 #

• 在loadAndPlay中添加catch块，处理浏览器自动播放限制、文件路径错误等可能的播放失败场景

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