基于Web Audio API的JS音频编辑器：如何为音频段添加滤镜与效果？

项目背景 #

我正在开发一款基于Web的JavaScript音频编辑器，并非实时应用滤镜效果的虚拟DJ工具，而是支持用户对加载的音频轨道进行剪切、复制、粘贴音频段的Web应用。目前已通过Web Audio API、React框架及Wavesurfer.js及其Regions插件，实现了音频段的剪切、复制、粘贴和音量调整功能，核心逻辑是操作AudioBuffer对象与Float32Array数组缓冲区完成的。

音量调整功能的实现（错误与修正版） #

初始问题代码 #

最初实现区域音量调整的函数存在逻辑错误，会从轨道起始位置而非目标区域起始位置更新数据：

function adjustGainToRegion(region, gain) {
  const start = region.start;
  const end = region.end;

  const originalAudioBuffer = waveSurfer.getDecodedData();

  var newAudioBuffer = audioContext.createBuffer(
    originalAudioBuffer.numberOfChannels,
    originalAudioBuffer.length,
    originalAudioBuffer.sampleRate
  );

  for (var channel = 0; channel < originalAudioBuffer.numberOfChannels; channel++) {
    var originalChanData = originalAudioBuffer.getChannelData(channel);
    var newChanData = newAudioBuffer.getChannelData(channel);

    var midData = originalChanData.subarray(start * originalAudioBuffer.sampleRate, end * originalAudioBuffer.sampleRate);

    newChanData.set(originalChanData);

    for(let i=0;i<midData.length;i++){
      newChanData[i] = newChanData[i] * gain;
    }
  }

  return newAudioBuffer;
}

修正后的代码 #

修正后拆分音频段为前置、目标区域、后置三部分，仅对目标区域调整音量后重新拼接：

function adjustGainToRegion(region, gain) {
  const start = region.start;
  const end = region.end;
  const regionDuration = Math.round(end - start);

  const originalAudioBuffer = waveSurfer.getDecodedData();

  var newAudioBuffer = audioContext.createBuffer(
      originalAudioBuffer.numberOfChannels,
      originalAudioBuffer.length,
      originalAudioBuffer.sampleRate
    );

  for (var channel = 0; channel < originalAudioBuffer.numberOfChannels; channel++) {
    var originalChanData = originalAudioBuffer.getChannelData(channel);
    var newChanData = newAudioBuffer.getChannelData(channel);

    var beforeData = originalChanData.subarray(0, start * originalAudioBuffer.sampleRate);
    var midData = originalChanData.subarray(start * originalAudioBuffer.sampleRate, end * originalAudioBuffer.sampleRate);
    var afterData = originalChanData.subarray(Math.floor(end * originalAudioBuffer.sampleRate), (originalAudioBuffer.length * originalAudioBuffer.sampleRate));

    for(let i=0;i<midData.length;i++){
      midData[i] = midData[i] * gain;
    }

    newChanData.set(beforeData);
    newChanData.set(midData, (start * newAudioBuffer.sampleRate));
    newChanData.set(afterData, (start + regionDuration) * newAudioBuffer.sampleRate);
  }

  return newAudioBuffer;
}

核心问题 #

如何通过操作AudioBuffer或数组缓冲区，给指定音频段应用滤波器（高通、低通、带通、陷波）及效果（混响、延迟、回声等）？这种方式是否可行？还是需要其他解决方案？

实现方案 #

一、直接操作AudioBuffer实现效果（可行） #

Web Audio API提供了原生的音频处理节点，可将目标音频段的数据通过这些节点处理后写回AudioBuffer，核心步骤如下：

1. 从原始AudioBuffer中截取目标区域的数据，创建临时AudioBuffer存储该片段；
2. 根据需求创建对应的处理节点（如BiquadFilterNode做滤波、DelayNode做延迟）；
3. 搭建处理链，捕获处理后的数据；
4. 将处理好的目标区域数据替换到新创建的AudioBuffer对应位置，完成拼接。

二、推荐方案：使用离线音频上下文（OfflineAudioContext） #

OfflineAudioContext支持后台离线处理音频，不需要实时播放，更适合非实时的音频编辑场景，代码更简洁高效：

async function applyEffectToRegion(region, effectCreator) {
  const originalBuffer = waveSurfer.getDecodedData();
  const sampleRate = originalBuffer.sampleRate;
  const startSample = Math.floor(region.start * sampleRate);
  const endSample = Math.floor(region.end * sampleRate);
  const regionDuration = region.end - region.start;

  // 创建离线上下文，长度匹配目标区域时长
  const offlineCtx = new OfflineAudioContext(
    originalBuffer.numberOfChannels,
    regionDuration * sampleRate,
    sampleRate
  );

  // 提取目标区域数据到临时buffer
  const tempBuffer = offlineCtx.createBuffer(
    originalBuffer.numberOfChannels,
    endSample - startSample,
    sampleRate
  );
  for (let ch = 0; ch < originalBuffer.numberOfChannels; ch++) {
    tempBuffer.getChannelData(ch).set(originalBuffer.getChannelData(ch).subarray(startSample, endSample));
  }

  // 创建源节点和效果链
  const source = offlineCtx.createBufferSource();
  source.buffer = tempBuffer;

  // 调用传入的效果创建函数，搭建处理逻辑
  const effectNode = effectCreator(offlineCtx);
  source.connect(effectNode);
  effectNode.connect(offlineCtx.destination);

  // 启动离线处理
  source.start();
  const processedBuffer = await offlineCtx.startRendering();

  // 拼接回原音频缓冲区
  const newBuffer = audioContext.createBuffer(
    originalBuffer.numberOfChannels,
    originalBuffer.length,
    sampleRate
  );
  for (let ch = 0; ch < originalBuffer.numberOfChannels; ch++) {
    const originalChan = originalBuffer.getChannelData(ch);
    const newChan = newBuffer.getChannelData(ch);
    newChan.set(originalChan.subarray(0, startSample));
    newChan.set(processedBuffer.getChannelData(ch), startSample);
    newChan.set(originalChan.subarray(endSample), endSample);
  }

  return newBuffer;
}

// 效果创建示例1：低通滤波器
const createLowpassFilter = (ctx) => {
  const filter = ctx.createBiquadFilter();
  filter.type = 'lowpass';
  filter.frequency.value = 1500; // 1kHz cutoff
  return filter;
};

// 效果创建示例2：延迟回声
const createDelayEcho = (ctx) => {
  const delay = ctx.createDelay();
  delay.delayTime.value = 0.5; // 500ms延迟
  const feedbackGain = ctx.createGain();
  feedbackGain.gain.value = 0.3; // 反馈增益

  delay.connect(feedbackGain);
  feedbackGain.connect(delay);
  return delay;
};

// 调用示例：给指定区域应用低通滤波
// applyEffectToRegion(region, createLowpassFilter).then(newBuffer => { /* 更新Wavesurfer的音频数据 */ });

三、不同效果的适配说明 #

• 滤波器：使用BiquadFilterNode，通过修改type属性切换高通、低通、带通、陷波等类型，调整frequency、Q等参数控制效果；
• 混响：使用ConvolverNode，加载预先录制的脉冲响应（IR）文件实现真实混响效果；
• 延迟/回声：通过DelayNode配合GainNode搭建反馈链，调整延迟时间和反馈增益控制回声强度与间隔。

内容的提问来源于stack exchange，提问作者AppInHand-Dev