Web Audio Source无法停止及页面冻结问题求助

咱们先拆解你遇到的几个核心问题：

• while循环导致页面冻结：JavaScript是单线程环境，while (context.state == 'running')会无限阻塞主线程，浏览器根本没时间处理音频停止后的状态更新，也无法响应用户其他操作，直接导致页面卡死。
• 第一首歌无法停止、多轨同时播放：根源是你没有正确管理sourceNode的引用——当切换歌曲时，旧的sourceNode没有被妥善清理或保留引用，导致playStop()只能操作最新的节点，旧的音频还在后台播放。另外Chrome的自动播放限制让第一首歌的初始化流程和后续歌曲不一样，加剧了这个问题。

具体修复步骤 #

1. 彻底移除while循环，改用正确的停止逻辑 #

playStop()里的while循环完全是错误的，音频停止是异步状态变更，不需要轮询。直接修改成：

//Stop Playing
function playStop(){
  code = 2;
  // 先检查sourceNode是否存在且可停止
  if (sourceNode && context.state === 'running') {
    try {
      sourceNode.stop(0);
    } catch(e) {
      // 捕获可能的错误，比如节点已经停止的情况
      console.warn('Failed to stop source node:', e);
    }
  }
  // 清空sourceNode引用，避免后续误操作
  sourceNode = null;
}

2. 管理sourceNode引用，避免多轨播放 #

每次创建新的sourceNode时，一定要先停止旧的节点，并更新引用。比如在playFunct()或者codeRoute()这类创建音频节点的函数里，开头加上：

function playFunct() {
  // 先停止旧的音频
  if (sourceNode && context.state === 'running') {
    try {
      sourceNode.stop(0);
    } catch(e) {}
  }
  // 创建新的sourceNode并赋值
  sourceNode = context.createBufferSource();
  // 后续的节点连接、播放逻辑...
}

这样就能保证每次播放新歌曲时，旧的音频会被停止，不会出现多轨同时播放的情况。

3. 适配Chrome自动播放限制的逻辑 #

Chrome阻止自动播放后，第一首歌的播放必须由用户交互触发（比如点击下一曲/上一曲）。你的playNext()逻辑里，当context.state !== 'running'时设置了code=1然后走codeRoute()，这里要确保codeRoute()里创建的sourceNode被正确赋值给全局的sourceNode变量，这样后续的playStop()才能找到它并停止。

另外，建议在用户第一次交互时初始化AudioContext，比如在按钮的点击事件里加上：

// 比如在所有控制按钮的点击处理函数开头
if (context.state === 'suspended') {
  context.resume().then(() => {
    console.log('AudioContext resumed');
  });
}

4. 优化playLast()的逻辑 #

playLast()里的sourceNode.stop(0)也要加上错误捕获，避免节点不存在或已停止时抛出错误：

//Play A Song Again
function playLast() {
  if (sourceNode && context.state == 'running') {
    try {
      sourceNode.stop(0);
    } catch(e) {}
  }
  console.log(data);
  code = 0;
  if (lastData == null) {
    playNext();
  } else {
    codeRoute();
  }
}

总结 #

核心思路就是：

• 永远不要用while循环阻塞主线程，音频状态变更靠直接检查一次即可，轮询只会卡死页面
• 严格管理sourceNode的引用，每次播放新音频前停止旧的
• 适配浏览器的自动播放限制，确保AudioContext在用户交互后正确初始化

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