如何使用AudioContext基于起始与结束时间（毫秒）裁剪Base64音频字符串

嘿，我来帮你搞定这个Base64音频裁剪的问题！你需要根据起始和结束毫秒数来裁剪Base64音频字符串，而且不需要在浏览器播放，只做裁剪操作对吧？我看你已经有了99.9%的代码，那我就把完整的解决方案梳理清楚，帮你补上最后那0.1%的缺口～

首先咱们得明确整个流程的核心逻辑：把Base64转成能被AudioContext识别的音频数据，裁剪后再转回Base64。下面是一步步的具体实现：

步骤拆解与代码实现 #

1. 核心裁剪函数 #

这里直接给你完整的异步函数，里面包含了所有步骤，我会在后面逐个解释关键点：

async function trimBase64Audio(base64Str, startMs, endMs) {
  // 步骤1：移除Base64前缀并解码为ArrayBuffer
  const base64Data = base64Str.split(',')[1];
  const binaryStr = atob(base64Data);
  const uint8Array = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    uint8Array[i] = binaryStr.charCodeAt(i);
  }
  const arrayBuffer = uint8Array.buffer;

  // 步骤2：用AudioContext解码音频数据
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

  // 处理边界情况：确保起始和结束时间在有效范围内
  const totalDurationMs = audioBuffer.duration * 1000;
  const validStartMs = Math.max(0, startMs);
  const validEndMs = Math.min(totalDurationMs, endMs);
  if (validStartMs >= validEndMs) {
    throw new Error("起始时间不能大于等于结束时间");
  }

  // 步骤3：计算裁剪对应的样本位置
  const startSample = Math.floor(validStartMs / 1000 * audioBuffer.sampleRate);
  const endSample = Math.floor(validEndMs / 1000 * audioBuffer.sampleRate);
  const sampleCount = endSample - startSample;

  // 创建新的AudioBuffer来存储裁剪后的音频
  const trimmedBuffer = audioContext.createBuffer(
    audioBuffer.numberOfChannels,
    sampleCount,
    audioBuffer.sampleRate
  );

  // 复制每个通道的样本数据
  for (let channel = 0; channel < audioBuffer.numberOfChannels; channel++) {
    const sourceData = audioBuffer.getChannelData(channel);
    const targetData = trimmedBuffer.getChannelData(channel);
    targetData.set(sourceData.subarray(startSample, endSample));
  }

  // 步骤4：将裁剪后的AudioBuffer编码为WAV并转回Base64
  function audioBufferToWav(buffer) {
    const length = buffer.length * buffer.numberOfChannels * 2 + 44;
    const arrayBuffer = new ArrayBuffer(length);
    const view = new DataView(arrayBuffer);
    const channels = [];
    let offset = 0;
    let pos = 0;

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

    // RIFF标识符
    setUint32(0x46464952);
    // 文件长度
    setUint32(length - 8);
    // WAVE标识符
    setUint32(0x45564157);
    // fmt子块
    setUint32(0x20746d66);
    // 子块长度
    setUint32(16);
    // 音频格式（PCM）
    setUint16(1);
    // 通道数
    setUint16(buffer.numberOfChannels);
    // 采样率
    setUint32(buffer.sampleRate);
    // 字节率
    setUint32(buffer.sampleRate * 2 * buffer.numberOfChannels);
    // 块对齐
    setUint16(buffer.numberOfChannels * 2);
    // 位深度
    setUint16(16);
    // data子块
    setUint32(0x61746164);
    // 子块长度
    setUint32(length - pos - 4);

    // 写入PCM数据
    for (let i = 0; i < buffer.numberOfChannels; i++) {
      channels.push(buffer.getChannelData(i));
    }

    while (pos < length) {
      for (let i = 0; i < buffer.numberOfChannels; i++) {
        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 arrayBuffer;
  }

  const wavArrayBuffer = audioBufferToWav(trimmedBuffer);
  const wavUint8Array = new Uint8Array(wavArrayBuffer);
  let wavBase64 = btoa(String.fromCharCode(...wavUint8Array));
  wavBase64 = `data:audio/wav;base64,${wavBase64}`;

  return wavBase64;
}

2. 关键步骤解释 #

• Base64转ArrayBuffer：先去掉Base64字符串里的data:audio/xxx;base64,前缀，用atob解码成二进制字符串，再转换成Uint8Array最终得到ArrayBuffer，这是AudioContext能识别的格式。
• 解码音频数据：创建AudioContext实例（兼容webkit内核），用decodeAudioData异步解码ArrayBuffer，得到包含音频样本信息的AudioBuffer。
• 边界处理：避免传入的起始/结束时间超出音频总时长，自动修正到有效范围内，同时判断非法的时间参数。
• 样本裁剪：音频的最小单位是样本，所以要把毫秒时间转换成样本数（样本数=时间秒数×采样率），然后创建新的AudioBuffer，复制对应区间的样本数据。
• 编码为WAV转Base64：AudioContext没有内置的编码功能，所以我们手动实现了WAV格式的编码（包含文件头和PCM数据），最后把编码后的ArrayBuffer转回Base64字符串。

3. 使用示例 #

你可以这样调用这个函数：

// 假设你有一个Base64音频字符串
const base64Audio = "data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmGgU7k9n1unEiBC13yO/eizEIHWq+8+OWT";
// 裁剪从100ms到500ms的部分
trimBase64Audio(base64Audio, 100, 500)
  .then(trimmedBase64 => {
    console.log("裁剪后的Base64音频：", trimmedBase64);
    // 这里可以处理裁剪后的结果
  })
  .catch(error => {
    console.error("裁剪出错：", error);
  });

备注：内容来源于stack exchange，提问作者MattWeiler