如何在Firefox中向Worker（AudioWorkletProcessor）传递Float32Array？

直接传递Float32Array的底层ArrayBuffer是最优解——既跨浏览器兼容，又完全避免序列化带来的性能开销，不会阻塞主线程。

• 为什么这个方案可行？
  Firefox不支持将Float32Array作为可转移对象，但所有现代浏览器都支持转移ArrayBuffer。Float32Array本质是ArrayBuffer的视图，我们只需要转移底层buffer，再在AudioWorklet端重建视图即可，全程零拷贝。

• 主线程实现代码
  获取音频通道的Float32Array后，提取其底层buffer，通过postMessage传递时标记为可转移对象，同时附带视图的偏移量和长度（确保Worker端能精准还原原数组）：

  // 主线程获取音频通道数据
  const floatArray = this.audioBuffer.getChannelData(i);
  // 向AudioWorklet发送消息，转移buffer所有权
  audioWorkletPort.postMessage({
    buffer: floatArray.buffer,
    byteOffset: floatArray.byteOffset,
    length: floatArray.length
  }, [floatArray.buffer]);
  

• AudioWorkletProcessor端实现代码
  接收消息后，用传入的buffer、偏移量和长度重建Float32Array视图，即可正常处理音频数据：

  class MyProcessor extends AudioWorkletProcessor {
    constructor() {
      super();
      this.bufferInfo = null;
      this.port.onmessage = (e) => {
        this.bufferInfo = e.data;
      };
    }
  
    process(inputs, outputs, parameters) {
      if (!this.bufferInfo) return true;
  
      // 重建原Float32Array视图
      const { buffer, byteOffset, length } = this.bufferInfo;
      const audioData = new Float32Array(buffer, byteOffset, length);
  
      // 在这里编写你的音频处理逻辑
      // ...
  
      return true;
    }
  }
  
  registerProcessor('my-processor', MyProcessor);
  

• 注意细节

  • 如果你的Float32Array是完整ArrayBuffer的视图（byteOffset为0，且length * Float32Array.BYTES_PER_ELEMENT === buffer.byteLength），可以省略byteOffset和length，直接用new Float32Array(buffer)重建，但保留这两个参数能适配所有场景（比如切片后的子数组）。
  • 标记buffer为可转移对象后，主线程会失去该buffer的所有权。如果主线程后续还要使用原Float32Array，去掉postMessage的第二个参数即可，此时浏览器会对buffer做结构化克隆（内存复制），性能仍远优于JSON序列化方案。

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