基于Web Audio API客户端提取视频音频二进制数据的问题

我完全懂你的困扰——能听到音频说明Web Audio已经正确抓取到了视频里的音频数据，但直接用getChannelData的结果生成下载文件时，体积和原视频差不多，这是因为你保存的是原始的浮点音频数据，而非标准的音频格式（比如WAV）。

问题根源 #

Web Audio的getChannelData()返回的是Float32Array，里面的数值范围是-1.0到1.0。如果直接把这个数组打包成Blob，相当于你在保存未经编码的原始浮点样本，这种数据没有压缩也没有标准文件头，体积自然会异常庞大（甚至比原视频还大都不奇怪）。而你能听到声音是因为Web Audio自身可以处理这种原始浮点数据，但普通音频播放器只认标准格式的文件。

解决方案：把浮点数据转换成标准WAV格式 #

你需要把Float32Array的样本转换成16位整数（WAV常用的编码格式），再加上WAV文件的头信息，最后生成Blob和下载链接。下面是具体的实现代码：

// 假设你已经获取到了AudioBuffer实例，比如命名为audioBuffer
function audioBufferToWav(audioBuffer) {
  const numberOfChannels = audioBuffer.numberOfChannels;
  const sampleRate = audioBuffer.sampleRate;
  const bitsPerSample = 16;
  const bytesPerSample = bitsPerSample / 8;
  const byteRate = sampleRate * numberOfChannels * bytesPerSample;
  const totalSamples = audioBuffer.length * numberOfChannels;
  const totalBytes = totalSamples * bytesPerSample + 44; // 44是WAV文件头的固定大小

  // 创建存储WAV数据的ArrayBuffer
  const buffer = new ArrayBuffer(totalBytes);
  const view = new DataView(buffer);

  // 封装写入WAV头的工具函数
  const setUint16 = (offset, value) => view.setUint16(offset, value, true);
  const setUint32 = (offset, value) => view.setUint32(offset, value, true);

  // 写入RIFF标识符
  setUint32(0, 0x52494646);
  // 写入文件总大小
  setUint32(4, totalBytes - 8);
  // 写入WAVE标识符
  setUint32(8, 0x57415645);
  // 写入fmt子块标识
  setUint32(12, 0x666d7420);
  // 写入fmt子块大小
  setUint32(16, 16);
  // 写入音频格式（PCM格式为1）
  setUint16(20, 1);
  // 写入通道数
  setUint16(22, numberOfChannels);
  // 写入采样率
  setUint32(24, sampleRate);
  // 写入字节率
  setUint32(28, byteRate);
  // 写入块对齐值
  setUint16(32, numberOfChannels * bytesPerSample);
  // 写入位深度
  setUint16(34, bitsPerSample);
  // 写入data子块标识
  setUint32(36, 0x64617461);
  // 写入data子块大小
  setUint32(40, totalSamples * bytesPerSample);

  // 将Float32样本转换为16位整数并写入数据区
  let offset = 44;
  for (let i = 0; i < audioBuffer.length; i++) {
    for (let channel = 0; channel < numberOfChannels; channel++) {
      const sample = audioBuffer.getChannelData(channel)[i];
      // 将-1~1的浮点值映射为-32768~32767的16位整数
      const intSample = Math.max(-32768, Math.min(32767, sample * 32767));
      view.setInt16(offset, intSample, true);
      offset += 2;
    }
  }

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

// 使用示例：
// 假设你已经通过Web Audio流程得到了audioBuffer
const wavBlob = audioBufferToWav(audioBuffer);
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(wavBlob);
downloadLink.download = 'extracted-audio.wav';
downloadLink.click();

关键说明 #

• 这段代码把浮点样本转换成了16位PCM编码，这是WAV的标准格式，文件体积会大幅缩小（比如44.1kHz双声道的音频，每分钟大概10MB左右，符合正常音频文件的体积预期）。
• 如果你需要MP3等压缩格式，Web Audio本身不支持编码，你需要引入第三方库（比如lamejs）来处理，但WAV是最直接无依赖的解决方案。

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