性能优化：AudioWorkletProcessor与Worker线程处理音频转码选哪个？

针对你的场景（10秒录制约700k样本，当前主线程处理转码和WAV构建），直接给出结论：优先选择单独开启Worker线程处理转码与WAV文件构建，而非AudioWorkletProcessor。原因如下：

1. AudioWorkletProcessor的核心限制 #

AudioWorklet运行在浏览器的音频实时渲染线程，这个线程有严格的时间要求——每帧处理必须在音频缓冲周期内完成（通常仅几毫秒），一旦阻塞就会导致音频卡顿、爆音甚至录制中断：

• 哪怕是简单的32位Float转16位PCM循环，若放在process()方法中执行，当设备性能不足或音频线程有其他负载时，极容易触发实时性问题。
• 即便转码逻辑轻量化，每帧通过port.postMessage传递转码后的数据，额外的序列化/反序列化开销反而可能抵消“在音频线程处理”的优势。

2. Worker线程的适配性优势 #

Worker线程是普通后台线程，优先级低于音频线程，但完全不会影响音频录制的实时性：

• 支持批量处理：无论是实时接收AudioWorklet发送的Float样本并转码，还是录制结束后一次性处理所有样本，都不会阻塞主线程或音频线程，避免UI卡顿或音频异常。
• 计算密集型操作完全隔离在后台，主线程仅需负责启动/停止录制、接收最终的WAV Blob即可，整体性能更稳定。

3. 结合现有代码的优化方案 #

调整AudioWorkletProcessor：仅做样本转发 #

只保留样本收集与转发逻辑，彻底避免在音频线程执行任何计算：

// wavprocessor.js
class WavProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    // 直接传递TypedArray，用Transferable Objects避免内存拷贝
    this.port.postMessage(inputs[0][0], [inputs[0][0].buffer]);
    return true;
  }
}
registerProcessor('wav-processor', WavProcessor);

主线程+Worker：转移转码与构建逻辑 #

1. 创建Worker文件（如wav-worker.js），封装转码和WAV构建逻辑：

// wav-worker.js
let floatSampleBuffers = [];

self.onmessage = (e) => {
  if (e.data.type === 'add-samples') {
    // 缓存样本缓冲区，避免频繁数组拷贝
    floatSampleBuffers.push(e.data.data);
  } else if (e.data.type === 'build-wav') {
    // 合并所有样本
    const totalLength = floatSampleBuffers.reduce((sum, buf) => sum + buf.length, 0);
    const allSamples = new Float32Array(totalLength);
    let offset = 0;
    for (const buf of floatSampleBuffers) {
      allSamples.set(buf, offset);
      offset += buf.length;
    }
    // 生成WAV文件
    const wavBlob = buildWav(allSamples);
    self.postMessage({ type: 'wav-ready', blob: wavBlob }, [wavBlob]);
    // 清空缓存
    floatSampleBuffers = [];
  }
};

function appendData(index, view, samples) {
  for (let i = 0; i < samples.length; i++) {
    const s = Math.max(-1, Math.min(1, samples[i]));
    const pcm = s < 0 ? s * 0x8000 : s * 0x7FFF;
    view.setUint16(index + 2 * i, pcm, true);
  }
}

function buildWav(samples) {
  const dataTypeSize = 16;
  const totalDataSize = (dataTypeSize / 8) * samples.length;
  const sizeOfFileDescriptor = totalDataSize + 36;
  const numberOfChannels = 1;
  const sampleRate = 44100;
  const bytesPerSample = numberOfChannels * dataTypeSize / 8;
  const blockAlign = numberOfChannels * bytesPerSample;
  const bitsPerSample = bytesPerSample * 8;
  const byteRate = sampleRate * bytesPerSample;
  const buffer = new ArrayBuffer(44 + totalDataSize);
  const view = new DataView(buffer);
  const format = 1;

  function writeStringIntoBuffer(index, str) {
    for (let i = 0; i < str.length; i++) {
      view.setUint8(index + i, str.charCodeAt(i));
    }
  }

  function write32BitInt(index, val) {
    view.setUint32(index, val, true);
  }

  function write16BitInt(index, val) {
    view.setUint16(index, val, true);
  }

  writeStringIntoBuffer(0, 'RIFF');
  write32BitInt(4, sizeOfFileDescriptor);
  writeStringIntoBuffer(8, 'WAVE');
  writeStringIntoBuffer(12, 'fmt ');
  write32BitInt(16, 16);
  write16BitInt(20, format);
  write16BitInt(22, numberOfChannels);
  write32BitInt(24, sampleRate);
  write32BitInt(28, byteRate);
  write16BitInt(32, blockAlign);
  write16BitInt(34, bitsPerSample);
  writeStringIntoBuffer(36, 'data');
  write32BitInt(40, totalDataSize);

  appendData(44, view, samples);

  return new Blob([view], { type: 'audio/wav' });
}

2. 修改主线程Recording.js，与Worker通信：

// Recording.js
var audioContext;
var wavWorker = new Worker('wav-worker.js');

// 接收Worker生成的WAV文件
wavWorker.onmessage = (e) => {
  if (e.data.type === 'wav-ready') {
    // 这里处理生成的WAV Blob（如下载、上传等）
    console.log('WAV文件已生成', e.data.blob);
  }
};

var record = async function() {
  audioContext = new AudioContext();
  const microphone = await navigator.mediaDevices.getUserMedia({ audio: true });

  const inputNode = audioContext.createMediaStreamSource(microphone);

  await audioContext.audioWorklet.addModule('wavprocessor.js');
  const wavProcessingNode = new AudioWorkletNode(audioContext, 'wav-processor');

  inputNode.connect(wavProcessingNode);
  wavProcessingNode.connect(audioContext.destination);

  // 将音频样本转发给Worker
  wavProcessingNode.port.onmessage = (e) => {
    wavWorker.postMessage({ type: 'add-samples', data: e.data }, [e.data.buffer]);
  };
};

var stop = function() {
  // 通知Worker构建WAV文件
  wavWorker.postMessage({ type: 'build-wav' });
  // 关闭音频上下文
  audioContext.close();
};

总结 #

• 绝不要在AudioWorkletProcessor中执行转码或文件构建这类计算密集型操作，否则会破坏音频实时性。
• Worker线程是这类后台计算的最佳选择，既能隔离负载，又不会影响录制过程的稳定性。

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