从API获取音频：实现下一曲播放按钮遇到的问题

我来帮你捋捋这个问题——你遇到的核心问题其实是两个：一是当前播放的音频没被正确暂停和清理，二是原有的“播放结束自动获取新音频”的循环，和按钮触发的新流程撞在了一起，导致双循环同时运行。咱们一步步来解决：

核心思路 #

1. 彻底清理旧音频实例：每次加载新音频前，必须对全局变量activeAudio里的旧音频执行暂停、重置播放进度，还要移除它的事件监听，避免旧音频的ended事件触发后继续执行自动逻辑。
2. 用状态变量控制自动循环：加一个开关变量，用来控制原有的自动循环是否允许运行，防止点击按钮后新旧流程同时执行。
3. 按钮点击时接管播放流程：点击按钮时先切断自动循环，处理旧音频，再加载新音频，最后根据需求恢复自动循环。

具体代码实现 #

首先定义全局变量和基础函数：

// 全局变量：存储当前正在播放的音频实例
let activeAudio = null;
// 自动循环开关：控制是否允许播放结束后自动获取新音频
let isAutoLoopEnabled = true;

// 从API获取音频URL的异步函数（替换成你的实际API调用）
async function fetchAudioFromAPI() {
  const response = await fetch('你的音频API地址');
  const data = await response.json();
  return data.audioUrl; // 假设返回的音频URL字段是audioUrl
}

// 通用播放音频函数：负责创建、播放音频，处理旧音频清理
async function playAudio(audioUrl) {
  return new Promise((resolve) => {
    // 1. 清理旧音频
    if (activeAudio) {
      activeAudio.pause(); // 暂停播放
      activeAudio.currentTime = 0; // 重置播放进度到开头
      activeAudio.removeEventListener('ended', resolve); // 移除旧的ended监听，避免触发旧逻辑
    }

    // 2. 创建并播放新音频
    activeAudio = new Audio(audioUrl);
    // 监听音频结束事件，用于自动循环的后续逻辑
    activeAudio.addEventListener('ended', () => {
      resolve();
    });
    // 开始播放
    await activeAudio.play();
  });
}

// 原有的自动循环播放逻辑
async function startAutoPlayLoop() {
  while (isAutoLoopEnabled) {
    const audioUrl = await fetchAudioFromAPI();
    await playAudio(audioUrl);
  }
}

// 页面加载完成后启动自动循环
document.addEventListener('DOMContentLoaded', () => {
  startAutoPlayLoop();
});

然后是按钮点击事件的处理：

// 绑定按钮点击事件
document.getElementById('yourRefreshButtonId').addEventListener('click', async () => {
  // 1. 暂停并清理当前音频，关闭自动循环开关
  if (activeAudio) {
    activeAudio.pause();
    activeAudio.currentTime = 0;
    isAutoLoopEnabled = false; // 让原有的自动循环退出
  }

  // 2. 获取新音频并播放
  const newAudioUrl = await fetchAudioFromAPI();
  await playAudio(newAudioUrl);

  // 3. 恢复自动循环（如果需要播放结束后继续自动获取，就打开开关并重启循环）
  isAutoLoopEnabled = true;
  // 因为原有的while循环已经退出，所以需要在当前音频结束后重启自动循环
  activeAudio.addEventListener('ended', () => {
    startAutoPlayLoop();
  }, { once: true }); // 只执行一次，避免重复绑定
});

关键细节解释 #

• 清理旧音频的必要性：如果只暂停而不移除ended事件监听，旧音频的ended事件可能在后续触发，导致自动循环逻辑再次执行，造成双循环。
• 自动循环开关的作用：isAutoLoopEnabled变量会让原有的while循环在点击按钮后自动退出，避免新旧循环同时运行。
• 恢复自动循环的时机：点击按钮播放新音频后，通过once选项绑定一次ended事件，确保当前音频播放结束后重启自动循环，既不会重复绑定，也能恢复原有的自动逻辑。

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