Web Audio API 实战：浏览器端音频处理架构

Web Audio API 架构

Web Audio API 基于音频图 (Audio Graph) 模型——音频数据流经一系列节点，每个节点执行特定处理：

AudioBufferSource → GainNode → AnalyserNode → AudioDestination
     (音源)         (音量)      (分析/可视化)     (扬声器)

与 HTML5 <audio> 元素不同，Web Audio API 提供底层、精确的音频控制能力。

---

核心对象

对象	作用	类比
AudioContext	音频处理的入口和时钟	音频引擎
AudioBuffer	内存中的音频数据	音频文件
AudioNode	处理单元	效果器/调音台
AudioParam	可动画的参数	音量旋钮

创建 AudioContext

const ctx = new AudioContext();

// 浏览器策略：需要用户交互后才能启动
button.addEventListener('click', () => ctx.resume());

---

音频剪辑实现

工具库 音频剪辑工具 的处理流程：

async function trimAudio(file: File, startSec: number, endSec: number) {
  const arrayBuffer = await file.arrayBuffer();
  const audioBuffer = await ctx.decodeAudioData(arrayBuffer);

  const duration = endSec - startSec;
  const sampleRate = audioBuffer.sampleRate;
  const startSample = Math.floor(startSec * sampleRate);
  const endSample = Math.floor(endSec * sampleRate);
  const length = endSample - startSample;

  // 创建裁剪后的 buffer
  const trimmed = ctx.createBuffer(
    audioBuffer.numberOfChannels, length, sampleRate
  );

  for (let ch = 0; ch < audioBuffer.numberOfChannels; ch++) {
    const sourceData = audioBuffer.getChannelData(ch);
    const destData = trimmed.getChannelData(ch);
    destData.set(sourceData.subarray(startSample, endSample));
  }

  return trimmed;
}

---

波形可视化

AnalyserNode 提供实时频域/时域数据：

const analyser = ctx.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
analyser.connect(ctx.destination);

const dataArray = new Uint8Array(analyser.frequencyBinCount);

function drawWaveform() {
  analyser.getByteTimeDomainData(dataArray);
  // 在 Canvas 上绘制波形
  requestAnimationFrame(drawWaveform);
}

---

音频格式与编码

格式	浏览器解码	浏览器编码	质量
WAV	✅	✅ (AudioContext)	无损
MP3	✅	❌	有损
OGG	✅	❌	有损
AAC	✅ (Safari)	❌	有损
WebM/Opus	✅	✅ (MediaRecorder)	有损

浏览器端编码能力有限。工具库音频工具主要处理 WAV 格式，视频工具的 音频提取 则借助 ffmpeg.wasm 支持 MP3/OGG 输出。

---

性能注意事项

1. AudioContext 是单例：一个页面只需一个 AudioContext
2. 大文件分块解码：超过 100MB 的音频先分块再 decodeAudioData
3. 及时 disconnect：不用的节点调用 node.disconnect() 释放资源
4. OfflineAudioContext：离线渲染不需要实时播放，性能更好

---

总结

Web Audio API 让浏览器具备了专业级音频处理能力。AudioContext 音频图、AudioBuffer 精确裁剪、AnalyserNode 实时分析——这些原语组合起来，可以实现从简单剪辑到复杂 DSP 的全谱系音频工具。