如何彻底销毁AudioContext？WebAudio录音实现中的上下文泄漏问题求助

看起来你已经做了不少基础的清理工作，但Web Audio API的资源回收确实有一些容易遗漏的细节，尤其是涉及到AudioWorklet这种跨线程组件的时候。我来帮你梳理几个关键的修复点，应该能解决上下文泄漏的问题：

1. 修复AudioWorkletProcessor的逻辑漏洞并清理线程通信 #

首先你的处理器代码里有个笔误：this.finish = true应该是this.finished = true，这个小错误会导致处理器无法正确进入结束状态。除此之外，我们还需要主动清理消息监听并关闭端口，切断主线程和AudioWorklet线程之间的引用链：

class PcmRecorder extends AudioWorkletProcessor {
  constructor() {
    super();
    this.buffers = [];
    this.finished = false;
    
    // 把消息处理函数抽出来，方便后续移除监听
    this.messageHandler = (event) => {
      const message = event.data;
      if (message.type === "Finish") {
        this.finished = true;
        // 移除消息监听，切断线程间的引用
        this.port.removeEventListener('message', this.messageHandler);
        // 关闭端口，告知浏览器不再需要通信
        this.port.close();
      }
    };
    
    this.port.addEventListener('message', this.messageHandler);
  }

  process(inputs) {
    // 如果已经标记为结束，直接返回false终止处理器
    if (this.finished) {
      this.port.postMessage({ type: "Finished" });
      return false;
    }

    const floats = inputs[0][0];
    const samples = Int16Array.from(floats, this.convertSample);
    this.buffers.push(samples);

    const total = this.buffers.reduce((total, arr) => total + arr.length, 0);
    if (total > 1600) {
      const mergedBuffer = new Int16Array(total);
      let writeLocation = 0;
      for (const source of this.buffers) {
        mergedBuffer.set(source, writeLocation);
        writeLocation += source.length;
      }
      this.port.postMessage({ type: "Audio", data: new Uint8Array(mergedBuffer.buffer) });
      this.buffers = [];
    }

    return true;
  }

  convertSample(floatSample) {
    return Math.max(-32768, Math.min(Math.round(floatSample * 32768), 32767));
  }
}

registerProcessor("PcmRecorder", PcmRecorder);

2. 完善主线程的资源清理流程 #

在收到Finished消息后，你需要做更彻底的清理，包括关闭整个媒体流、移除消息监听、解除对象引用，确保垃圾回收器能正确回收这些资源：

// 抽离消息处理函数，方便移除监听
const handleRecorderMessage = async (event) => {
  const msg = event.data;
  if (msg.type === "Audio") listener.onDataAvailable?.(msg.data);
  
  if (msg.type === "Finished") {
    try {
      // 1. 移除recorder的消息监听，切断闭包引用
      recorder.port.removeEventListener('message', handleRecorderMessage);
      
      // 2. 彻底关闭整个MediaStream，而不仅仅是单个track
      stream.getTracks().forEach(track => track.stop());
      stream.close();
      
      // 3. 断开所有音频节点连接
      source.disconnect();
      recorder.disconnect();
      
      // 4. 确保AudioContext完全关闭，处理各种状态情况
      if (context.state !== 'closed') {
        await context.close();
      }
      
      // 5. 解除所有对象引用，帮助GC回收
      source = null;
      recorder = null;
      context = null;

      // 触发回调
      if (recordingEndedError) {
        listener?.onRecordingTerminated?.(recordingEndedError);
      } else {
        try {
          listener?.onRecordingCompleted?.();
        } catch (e) {}
      }
    } catch (err) {
      console.error('Cleanup failed:', err);
      recordingEndedError = recordingEndedError || new AsyncError('Cleanup error', err);
      listener?.onRecordingTerminated?.(recordingEndedError);
    } finally {
      recordingStopped.resolve();
    }
  }
};

// 用addEventListener替代直接赋值onmessage，方便后续移除
recorder.port.addEventListener('message', handleRecorderMessage);

3. 避免重复触发清理流程 #

你的audioTrack.onended事件可能会和主动调用stopRecording产生冲突，导致重复清理。可以加一个标志位防止这种情况：

let isCleaningUp = false;

const stopRecording = (error) => {
  if (isCleaningUp) return recordingStopped.promise;
  isCleaningUp = true;
  
  recorder.port.postMessage({ type: "Finish" });
  recordingEndedError = error;
  return recordingStopped.promise;
};

audioTrack.onended = () => {
  if (!isCleaningUp) {
    stopRecording(new AudioEndedError());
  }
};

4. 浏览器层面的注意事项 #

• Chrome的延迟回收：Chrome有时候会保留AudioContext线程几秒时间，尤其是如果有未处理的音频缓冲区，但通过上面的彻底清理，这些线程会很快被回收。你可以在Memory面板做堆快照，搜索AudioContext确认是否还有残留实例。
• 严格模式下的闭包引用：确保所有相关变量（context、source、recorder）在清理后被设为null，避免闭包持有引用导致GC无法回收。
• AudioWorklet的生命周期：当process()返回false后，浏览器会销毁处理器，但如果端口还保持打开或有监听，会延迟回收，所以一定要关闭端口并移除监听。

总结 #

核心的修复思路就是：切断所有跨线程引用、彻底关闭所有媒体资源、解除对象引用帮助GC。按照上面的步骤修改后，多次启停录音应该不会再出现AudioContext泄漏的问题了。

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