Web Audio API 深入

概述

Web Audio API 是 W3C 制定的 Web 高级音频处理标准，它提供了一套强大而灵活的音频处理系统，允许开发者在浏览器中创建、合成、处理和控制音频信号。与简单的 <audio> 标签不同，Web Audio API 采用模块化路由（Modular Routing）架构，开发者可以像搭建音频工作室一样，将各种音频节点（AudioNode）连接成处理链，实现复杂的音频效果。

Web Audio API 的应用场景包括：音乐合成器、音频可视化、语音处理、游戏音效、实时通信的音频处理、音频编辑工具等。

AudioContext 与音频图谱

AudioContext

AudioContext 是整个 Web Audio API 的入口和核心管理器。它代表一个音频处理环境，管理所有音频节点的创建和音频信号的渲染。

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

重要：AudioContext 的创建和激活受浏览器自动播放策略的限制。Chrome 等浏览器要求 AudioContext 必须在用户交互（点击、触摸等）后才能创建或恢复：

// 正确的做法：在用户点击事件中创建或恢复
button.addEventListener('click', () => {
  if (audioCtx.state === 'suspended') {
    audioCtx.resume()
  }
})

AudioContext 的主要属性包括：

• sampleRate：采样率，通常为 44100 Hz 或 48000 Hz
• currentTime：当前音频上下文的时间戳（秒），用于精确的音频调度
• state：音频上下文的状态（running / suspended / closed）
• baseLatency：音频输出延迟

音频图谱（Audio Graph）

音频图谱是 Web Audio API 的核心概念。它由一系列 AudioNode 节点组成，节点之间通过 connect 方法连接，形成信号处理链：

音频源 → 效果节点 → 分析节点 → 输出（destination）

典型的连接模式如下：

// 创建节点
const oscillator = audioCtx.createOscillator()
const gainNode = audioCtx.createGain()
const analyser = audioCtx.createAnalyser()

// 连接：振荡器 → 增益 → 分析器 → 输出
oscillator.connect(gainNode)
gainNode.connect(analyser)
analyser.connect(audioCtx.destination)

这种模块化设计的好处是灵活性极高——开发者可以自由组合和重排节点，构建任意复杂的音频处理管线。

音频源

Web Audio API 提供了多种音频源节点，每种适用于不同的场景。

振荡器（OscillatorNode）

OscillatorNode 生成基础波形，适合用于合成器、提示音、音频信号测试：

const oscillator = audioCtx.createOscillator()
oscillator.type = 'sine'       // sine / square / sawtooth / triangle
oscillator.frequency.value = 440  // A4 音高
oscillator.start()

支持四种基础波形：

• sine（正弦波）：纯净的单频音，音色柔和
• square（方波）：包含奇次谐波，音色尖锐饱满，常用于 8-bit 游戏音效
• sawtooth（锯齿波）：包含所有整数次谐波，音色明亮丰富
• triangle（三角波）：包含奇次谐波但衰减更快，音色介于正弦和方波之间

音频文件（AudioBufferSourceNode）

AudioBufferSourceNode 用于播放预加载的音频文件：

const response = await fetch('audio.mp3')
const arrayBuffer = await response.arrayBuffer()
const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer)

const source = audioCtx.createBufferSource()
source.buffer = audioBuffer
source.loop = true
source.connect(audioCtx.destination)
source.start()

AudioBuffer 可以包含多个声道（channel），支持立体声或环绕声播放。通过 decodeAudioData 解码后即可使用。

麦克风输入（MediaStreamAudioSourceNode）

MediaStreamAudioSourceNode 将麦克风等实时音频输入引入音频图谱，是实现语音处理、实时通信的基础：

const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
const source = audioCtx.createMediaStreamSource(stream)
source.connect(audioCtx.destination)

音频效果

音量控制（GainNode）

GainNode 是最常用的效果节点，控制音频信号的音量（增益）：

const gainNode = audioCtx.createGain()
gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime)  // 50% 音量

// 淡入效果
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 2)

gain 参数是一个 AudioParam，支持多种自动化方法：

• setValueAtTime(value, time)：在指定时间设定值
• linearRampToValueAtTime(value, time)：线性渐变到指定值
• exponentialRampToValueAtTime(value, time)：指数渐变到指定值
• setTargetAtTime(target, time, timeConstant)：以指数衰减趋近目标值

这些自动化方法使得音频淡入淡出、音量渐变的实现变得非常简单。

滤波器（BiquadFilterNode）

BiquadFilterNode 实现双二阶滤波器，用于调整音频信号的频率响应：

const filter = audioCtx.createBiquadFilter()
filter.type = 'lowpass'   // lowpass / highpass / bandpass / notch / peaking / lowshelf / highshelf
filter.frequency.value = 1000
filter.Q.value = 1
filter.gain.value = 0     // 仅 peaking/lowshelf/highshelf 类型使用

滤波器类型及其作用：

类型	作用	典型应用
lowpass	保留低频，衰减高频	模拟水中听声、低音炮分频
highpass	保留高频，衰减低频	去除低频噪音、人声处理
bandpass	保留特定频率范围	电话音效、EQ 处理
notch	衰减特定频率	消除特定频段的噪声
peaking	提升或削减特定频率	图形均衡器
lowshelf	提升或削减低于某频率的部分	低频增强
highshelf	提升或削减高于某频率的部分	高频增强

卷积混响（ConvolverNode）

ConvolverNode 是 Web Audio API 中最强大的效果节点之一。它通过卷积运算模拟音频在不同空间中的混响效果：

const convolver = audioCtx.createConvolver()
convolver.buffer = impulseResponse  // 脉冲响应音频数据
convolver.normalize = true          // 自动归一化

source.connect(convolver)
convolver.connect(audioCtx.destination)

脉冲响应（Impulse Response, IR）是描述空间声学特性的音频文件。通过在真实空间中录制枪声或气球爆破声得到 IR 数据，然后将任何音频与 IR 卷积，就能模拟在该空间中播放的效果。常见 IR 包括：音乐厅、教堂、山谷、浴室等。

实时音频可视化

AnalyserNode

AnalyserNode 是一个特殊的音频节点，它不改变音频信号，而是实时提供音频数据的频域和时域分析结果：

const analyser = audioCtx.createAnalyser()
analyser.fftSize = 2048
const bufferLength = analyser.frequencyBinCount  // fftSize / 2
const dataArray = new Uint8Array(bufferLength)

// 获取频域数据（频谱）
analyser.getByteFrequencyData(dataArray)

// 获取时域数据（波形）
analyser.getByteTimeDomainData(dataArray)

频谱可视化

结合 Canvas 绘制实时频谱是 Web Audio API 最流行的可视化方式：

function drawSpectrum() {
  requestAnimationFrame(drawSpectrum)
  analyser.getByteFrequencyData(dataArray)

  ctx.clearRect(0, 0, canvas.width, canvas.height)
  const barWidth = (canvas.width / bufferLength) * 2.5

  for (let i = 0; i < bufferLength; i++) {
    const value = dataArray[i] / 255
    const barHeight = value * canvas.height
    const hue = 200 + (i / bufferLength) * 160
    ctx.fillStyle = `hsl(${hue}, 100%, ${40 + value * 40}%)`
    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight)
  }
}

时域波形图

时域数据反映音频信号的振幅随时间的变化，绘制波形图可以看到声音的"形状"：

analyser.getByteTimeDomainData(dataArray)
ctx.beginPath()
const sliceWidth = canvas.width / bufferLength
let x = 0
for (let i = 0; i < bufferLength; i++) {
  const v = dataArray[i] / 128.0
  const y = v * canvas.height / 2
  if (i === 0) ctx.moveTo(x, y)
  else ctx.lineTo(x, y)
  x += sliceWidth
}
ctx.stroke()

不同波形在时域中的表现差异明显：正弦波呈现平滑的正弦曲线，方波呈现陡峭的边缘，锯齿波呈现锯齿形状。这对于调试音频合成和理解波形特性非常有帮助。

3D 音效

PannerNode

PannerNode 实现空间音频（3D 音效），让声音在三维空间中拥有位置感和移动感：

const panner = audioCtx.createPanner()
panner.panningModel = 'HRTF'          // HRTF / equalpower
panner.distanceModel = 'inverse'     // 距离衰减模型
panner.positionX.value = 2            // x 坐标
panner.positionY.value = 0            // y 坐标
panner.positionZ.value = 1            // z 坐标
panner.refDistance = 1               // 参考距离
panner.rolloffFactor = 1             // 衰减因子
panner.maxDistance = 10000           // 最大距离

PannerNode 的关键参数：

• panningModel：HRTF（头相关传输函数，最逼真）或 equalpower（等功率，性能更好）
• positionX/Y/Z：声源在三维空间中的位置
• orientationX/Y/Z：声源的朝向（用于模拟指向性）
• refDistance / rolloffFactor：控制声音随距离衰减的方式

通过结合 PannerNode 和动画循环，可以实现声源围绕听者移动的效果：

function updatePosition(time) {
  panner.positionX.value = Math.sin(time * 0.5) * 3
  panner.positionZ.value = Math.cos(time * 0.5) * 3
  requestAnimationFrame(updatePosition)
}

实战案例：在线音频编辑器

以下 Demo 展示了一个完整的 Web Audio API 应用——在线音频编辑器配合频谱可视化工具：

• 振荡器控制：选择正弦波/方波/锯齿波/三角波四种波形
• 频率调节：100-2000 Hz 范围，实时改变音高
• 音量控制：0-100% 音量调节
• 滤波器控制：低通/高通/带通/带阻四种滤波器类型，可调节截止频率和 Q 值
• 频谱可视化：使用 AnalyserNode 实时绘制频域频谱图（柱状图渐变）
• 波形可视化：同时绘制时域波形图
• 音频信息显示：采样率、当前时间、播放状态

最佳实践

性能优化

1. 复用 AudioContext：整个应用只创建一个 AudioContext 实例
2. 及时断开节点：不再使用的节点应断开连接并置空，避免内存泄漏
3. 控制 AnalyserNode 的 fftSize：fftSize 越大精度越高但性能开销也越大，默认 2048 通常足够
4. 使用 OfflineAudioContext 进行离线渲染：需要预处理音频时使用离线上下文

音频调度精度

Web Audio API 的 currentTime 基于高精度时钟，比 setTimeout / setInterval 精确得多。对于需要精确时序的音乐应用，应使用 AudioContext.currentTime 配合音频参数的自动化方法：

// 精确的音符调度
function playNote(frequency, startTime, duration) {
  const osc = audioCtx.createOscillator()
  const gain = audioCtx.createGain()
  osc.frequency.value = frequency
  osc.connect(gain)
  gain.connect(audioCtx.destination)
  gain.gain.setValueAtTime(0.5, startTime)
  gain.gain.setValueAtTime(0, startTime + duration)
  osc.start(startTime)
  osc.stop(startTime + duration)
}

浏览器兼容性

• 主流浏览器全面支持 Web Audio API（Chrome、Firefox、Safari、Edge）
• Safari 仍需要 webkitAudioContext 前缀
• AudioContext 的自动播放策略各浏览器实现略有差异，务必在用户交互后创建/恢复

总结

Web Audio API 为 Web 应用带来了专业级的音频处理能力。本文从 AudioContext 和音频图谱的基础概念出发，详细介绍了各种音频源、效果节点、可视化技术和空间音频。通过模块化路由架构，开发者可以像搭建音频工作室一样灵活地组合各种音频处理节点，实现从简单的音量控制到复杂的 3D 空间音效的全方位音频功能。结合可视化技术，Web Audio API 可以构建出媲美原生应用的音频编辑和合成工具。