如何在JavaScript中按指定时间切割Audio Blob？

嘿，我完全懂你现在的困扰——不同浏览器录制时长不一致，得靠切割Blob来统一，而且你完全没头绪，别担心，我一步步给你讲清楚怎么做：

首先得明确一个关键点：你不能直接对Audio Blob做字节层面的切割，因为音频文件是经过编码的（比如WebM、MP3），直接切字节会破坏文件结构，导致播放不了。正确的做法是先把Blob解码成原始的音频样本数据，处理完再重新编码回Blob。

下面是完整的实现思路和代码示例：

核心步骤拆解 #

• 1. 把Audio Blob转换成ArrayBuffer，然后用AudioContext解码成AudioBuffer（这是原始的音频样本数据，能直接操作时间范围）
• 2. 从原始AudioBuffer中提取你需要的时间片段对应的样本
• 3. 创建一个新的AudioBuffer，把提取的样本填充进去
• 4. 将新的AudioBuffer编码回Blob格式

完整代码实现 #

async function sliceAudioBlob(audioBlob, startMs, endMs) {
  // 步骤1：解码Blob为AudioBuffer
  const arrayBuffer = await audioBlob.arrayBuffer();
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const originalBuffer = await audioContext.decodeAudioData(arrayBuffer);

  // 计算时间对应的样本位置（AudioBuffer的样本率是samples/秒）
  const sampleRate = originalBuffer.sampleRate;
  const startSample = Math.floor(startMs / 1000 * sampleRate);
  const endSample = Math.floor(endMs / 1000 * sampleRate);
  const durationSamples = endSample - startSample;

  // 步骤2：创建新的AudioBuffer，匹配原始音频的通道数
  const slicedBuffer = audioContext.createBuffer(
    originalBuffer.numberOfChannels,
    durationSamples,
    sampleRate
  );

  // 步骤3：把原始音频的对应样本复制到新Buffer
  for (let channel = 0; channel < originalBuffer.numberOfChannels; channel++) {
    const originalData = originalBuffer.getChannelData(channel);
    const slicedData = slicedBuffer.getChannelData(channel);
    slicedData.set(originalData.subarray(startSample, endSample));
  }

  // 步骤4：将新AudioBuffer编码回Blob
  return new Promise((resolve) => {
    // 使用AudioContext的encodeAudioData方法（现代浏览器支持）
    audioContext.encodeAudioData(slicedBuffer).then(encodedBuffer => {
      // 这里的MIME类型要和原始Blob一致，比如你录制的是webm就用'audio/webm'
      const slicedBlob = new Blob([encodedBuffer], { type: audioBlob.type });
      resolve(slicedBlob);
    }).catch(error => {
      // 如果encodeAudioData不支持，可以用MediaRecorder作为降级方案
      const source = audioContext.createBufferSource();
      source.buffer = slicedBuffer;
      const destination = audioContext.createMediaStreamDestination();
      source.connect(destination);

      const recorder = new MediaRecorder(destination.stream, { mimeType: audioBlob.type });
      const chunks = [];
      recorder.ondataavailable = (e) => chunks.push(e.data);
      recorder.onstop = () => resolve(new Blob(chunks, { type: audioBlob.type }));

      source.start();
      recorder.start();
      // 录制完就停止
      setTimeout(() => {
        recorder.stop();
        source.stop();
      }, endMs - startMs);
    });
  });
}

// 使用示例：
// sliceAudioBlob(audio_blob, 0, 10000).then(slicedBlob => {
//   // 这里拿到切割后的Blob，可以下载或者播放
//   const url = URL.createObjectURL(slicedBlob);
//   const audio = new Audio(url);
//   audio.play();
// });

关键细节说明 #

• MIME类型匹配：一定要保证编码时的MIME类型和原始录制的Blob一致，比如你用MediaRecorder录制的是audio/webm，就不要改成audio/mp3，否则可能编码失败。
• 兼容性处理：encodeAudioData是比较新的API，部分旧浏览器不支持，所以代码里加了MediaRecorder的降级方案，确保在更多浏览器上能运行。
• 时间计算：AudioBuffer的样本率是每秒的样本数，所以要把毫秒转成样本索引，用Math.floor避免小数索引导致的错误。

针对你遇到的浏览器录制时长不一致的问题，只要在录制完成后，调用这个函数把音频切割到你需要的固定时长（比如10秒），就能统一所有浏览器的输出啦！

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