如何在JavaScript中将Audio Blob转为原始音频格式并上传至Firebase Storage

嘿，我来帮你搞定这个问题！你手里的这个audio/webm格式Blob其实有两种处理方式——如果只是想上传到Firebase Storage，直接传就行；如果确实需要转换成原始音频格式（比如未压缩的PCM），那咱们用Web Audio API来处理。下面是具体步骤：

这是最简单的方案，Firebase Storage支持直接存储任意格式的Blob对象，完全不需要额外转换。代码示例如下：

// 假设你已经完成Firebase Storage的初始化
const storage = firebase.storage();
const storageRef = storage.ref();

// 自定义存储路径，比如audio/my-recording.webm
const audioRef = storageRef.child('audio/my-recording.webm');

// 上传Blob对象
audioRef.put(yourBlobObject)
  .then((snapshot) => {
    console.log('音频上传成功！');
    // 可选：获取音频的下载URL
    return snapshot.ref.getDownloadURL();
  })
  .then((downloadURL) => {
    console.log('音频可通过此链接访问：', downloadURL);
  })
  .catch((error) => {
    console.error('上传过程出错：', error);
  });

如果你需要的是原始未压缩的音频数据（比如PCM），可以通过Web Audio API解码WebM Blob，提取原始音频样本，再包装成WAV格式的Blob（裸PCM没有文件头，大部分系统无法识别，所以通常用WAV作为容器），之后再上传。

完整实现代码如下：

// 第一步：将WebM Blob解码为音频缓冲区
async function convertWebMToWav(webmBlob) {
  const arrayBuffer = await webmBlob.arrayBuffer();
  // 兼容不同浏览器的AudioContext
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

  // 第二步：将音频缓冲区转换为WAV格式Blob
  return audioBufferToWav(audioBuffer);
}

// 辅助函数：把AudioBuffer转为标准WAV格式Blob
function audioBufferToWav(buffer) {
  const totalLength = buffer.length * buffer.numberOfChannels * 2 + 44;
  const arrayBuffer = new ArrayBuffer(totalLength);
  const view = new DataView(arrayBuffer);
  const channels = [];
  let offset = 0;
  let pos = 0;

  // 写入WAV文件头信息
  const writeUint16 = (value) => {
    view.setUint16(pos, value, true);
    pos += 2;
  };
  const writeUint32 = (value) => {
    view.setUint32(pos, value, true);
    pos += 4;
  };

  // RIFF 标识
  writeUint32(0x46464952);
  // 文件总长度（减去8字节的RIFF标识和长度字段）
  writeUint32(totalLength - 8);
  // WAVE 标识
  writeUint32(0x45564157);
  // fmt 子块标识
  writeUint32(0x20746d66);
  // fmt 子块长度（PCM格式固定为16）
  writeUint32(16);
  // 音频格式（PCM=1）
  writeUint16(1);
  // 声道数
  writeUint16(buffer.numberOfChannels);
  // 采样率
  writeUint32(buffer.sampleRate);
  // 字节率 = 采样率 × 声道数 × 位深度/8（这里位深度是16，所以是2）
  writeUint32(buffer.sampleRate * buffer.numberOfChannels * 2);
  // 块对齐 = 声道数 × 位深度/8
  writeUint16(buffer.numberOfChannels * 2);
  // 位深度（16位）
  writeUint16(16);
  // data 子块标识
  writeUint32(0x61746164);
  // data 子块长度（总长度减去前面的44字节头）
  writeUint32(totalLength - pos - 4);

  // 提取各声道的PCM数据
  for (let i = 0; i < buffer.numberOfChannels; i++) {
    channels.push(buffer.getChannelData(i));
  }

  // 将PCM数据写入ArrayBuffer
  while (pos < totalLength) {
    for (let i = 0; i < buffer.numberOfChannels; i++) {
      // 将浮点数样本转换为16位整数
      let sample = Math.max(-1, Math.min(1, channels[i][offset]));
      sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
      view.setInt16(pos, sample, true);
      pos += 2;
    }
    offset++;
  }

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

// 第三步：上传转换后的WAV Blob到Firebase Storage
async function uploadRawAudioToFirebase(webmBlob) {
  try {
    const wavBlob = await convertWebMToWav(webmBlob);
    const storage = firebase.storage();
    const storageRef = storage.ref().child('audio/my-raw-recording.wav');
    
    const snapshot = await storageRef.put(wavBlob);
    console.log('原始音频上传成功！');
    const downloadURL = await snapshot.ref.getDownloadURL();
    console.log('原始音频下载链接：', downloadURL);
    return downloadURL;
  } catch (error) {
    console.error('转换或上传过程出错：', error);
  }
}

// 调用函数，传入你的Blob对象
uploadRawAudioToFirebase(yourBlobObject);

额外说明 #

• 如果你确实需要裸PCM数据（不带WAV头），可以去掉audioBufferToWav里的文件头写入逻辑，直接将PCM样本转为Blob（类型设为audio/pcm），但这种格式几乎无法直接播放，仅适合后续音频处理场景。
• 确保你已经正确初始化了Firebase SDK，并且引入了Storage模块。
• 代码已经兼容了旧版浏览器的webkitAudioContext前缀。

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