如何将AudioWorklet输出的Float32Array转换为可播放音频文件？

你当前的核心问题是：直接将AudioWorklet输出的32位浮点PCM原始音频数据打包成audio/webm;codecs=opus格式的Blob，浏览器无法识别这种裸数据格式——WebM/Opus是经过编码的压缩格式，而你存储的是未编码的原始采样数据，两者不兼容。

以下是两种可行的解决思路：

方案1：转成WAV格式（简单无压缩） #

WAV是原生支持PCM数据的容器格式，无需编码，直接封装即可播放。

步骤1：完善AudioWorklet的缓冲区收尾 #

停止录音时，主动触发处理器的flush方法，避免丢失最后一段未满缓冲区的数据：

// 在RecorderProcessor的constructor中添加消息监听
constructor() {
  super();
  this.initBuffer();
  this.port.onmessage = (e) => {
    if (e.data.command === 'flush' && !this.isBufferEmpty()) {
      this.flush();
    }
  };
}

步骤2：修改stopstream函数，合并数据并生成WAV #

function stopstream() {
  if (micSourceNode) micSourceNode.disconnect(recordingNode);
  
  // 主动触发缓冲区收尾
  recordingNode.port.postMessage({ command: 'flush' });

  // 合并所有Float32采样数据
  const totalLength = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
  const mergedPCM = new Float32Array(totalLength);
  let offset = 0;
  for (const chunk of chunks) {
    mergedPCM.set(chunk, offset);
    offset += chunk.length;
  }

  // 将Float32 PCM转成WAV格式的ArrayBuffer
  const wavBuffer = float32ToWav(mergedPCM, 48000, 1);

  // 生成可播放的Blob
  const blob = new Blob([wavBuffer], { type: 'audio/wav' });
  const audioUrl = URL.createObjectURL(blob);
  document.getElementById('song').innerHTML = `<audio id="audio-player" controls src="${audioUrl}" type="audio/wav"></audio>`;
}

// 辅助工具函数：Float32 PCM转WAV
function float32ToWav(floatArray, sampleRate, channels) {
  const bytesPerSample = 4;
  const byteRate = sampleRate * channels * bytesPerSample;
  
  const arrayBuffer = new ArrayBuffer(44 + floatArray.length * bytesPerSample);
  const view = new DataView(arrayBuffer);

  // 写入WAV文件头
  view.setUint8(0, 0x52); view.setUint8(1, 0x49); view.setUint8(2, 0x46); view.setUint8(3, 0x46);
  view.setUint32(4, 36 + floatArray.length * bytesPerSample, true);
  view.setUint8(8, 0x57); view.setUint8(9, 0x41); view.setUint8(10, 0x56); view.setUint8(11, 0x45);
  view.setUint8(12, 0x66); view.setUint8(13, 0x6D); view.setUint8(14, 0x74); view.setUint8(15, 0x20);
  view.setUint32(16, 16, true);
  view.setUint16(20, 3, true); // 3表示浮点PCM格式
  view.setUint16(22, channels, true);
  view.setUint32(24, sampleRate, true);
  view.setUint32(28, byteRate, true);
  view.setUint16(32, channels * bytesPerSample, true);
  view.setUint16(34, 32, true); // 位深度32位
  view.setUint8(36, 0x64); view.setUint8(37, 0x61); view.setUint8(38, 0x74); view.setUint8(39, 0x61);
  view.setUint32(40, floatArray.length * bytesPerSample, true);

  // 写入浮点采样数据
  let offset = 44;
  for (const sample of floatArray) {
    view.setFloat32(offset, sample, true);
    offset += bytesPerSample;
  }

  return arrayBuffer;
}

方案2：编码成WebM/Opus格式（压缩体积） #

如果需要更小的文件体积，可以利用MediaRecorder API将原始PCM数据编码成WebM/Opus格式：

async function stopstream() {
  if (micSourceNode) micSourceNode.disconnect(recordingNode);
  
  // 主动触发缓冲区收尾
  recordingNode.port.postMessage({ command: 'flush' });

  // 合并所有Float32采样数据
  const totalLength = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
  const mergedPCM = new Float32Array(totalLength);
  let offset = 0;
  for (const chunk of chunks) {
    mergedPCM.set(chunk, offset);
    offset += chunk.length;
  }

  // 创建AudioBuffer并通过MediaRecorder录制编码
  const audioBuffer = context.createBuffer(1, mergedPCM.length, 48000);
  audioBuffer.getChannelData(0).set(mergedPCM);
  
  const source = context.createBufferSource();
  source.buffer = audioBuffer;
  
  const dest = context.createMediaStreamDestination();
  source.connect(dest);
  
  const recorder = new MediaRecorder(dest.stream, { mimeType: 'audio/webm;codecs=opus' });
  const recordedChunks = [];
  
  recorder.ondataavailable = (e) => {
    if (e.data.size > 0) recordedChunks.push(e.data);
  };
  
  recorder.onstop = () => {
    const blob = new Blob(recordedChunks, { type: 'audio/webm;codecs=opus' });
    const audioUrl = URL.createObjectURL(blob);
    document.getElementById('song').innerHTML = `<audio id="audio-player" controls src="${audioUrl}" type="audio/webm"></audio>`;
  };
  
  recorder.start();
  source.start();
  
  // 播放结束后停止录制
  source.onended = () => recorder.stop();
}

关键注意事项 #

• 必须保证采样率、声道数全程一致：你的AudioContext使用了48000采样率，转换或编码时要保持相同参数，否则会出现音频变调、速度异常。
• 一定要处理最后一段缓冲区：停止录音时主动触发flush，避免丢失末尾的音频数据。

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