如何通过Web Audio API创建复杂的音频处理与可视化效果？

Web Audio API 是浏览器内置的音频操作接口，它通过节点图的方式让开发者灵活地处理声音信号，并能把处理后的数据用于画面绘制。利用它，我们可以做出均衡器、延迟混音以及随音乐跳动的视觉特效。

一、创建音频上下文与来源节点

一切处理都从 AudioContext 开始。我们得到上下文后，再创建音源，例如从音频文件或麦克风输入。

// 创建音频上下文
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// 从音频元素创建音源
const audioEl = document.createElement('audio');
audioEl.src = 'https://ipipp.com/sample.mp3';
audioEl.crossOrigin = 'anonymous';
audioEl.loop = true;
const source = audioCtx.createMediaElementSource(audioEl);

二、搭建复杂的音频处理链

通过把多个音频节点相连，可以形成滤波、增益、延迟等处理效果。下面示例加入低通滤波与音量控制。

// 低通滤波器
const filter = audioCtx.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.value = 800;

// 增益节点
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.8;

// 连接：音源 -> 滤波 -> 增益 -> 输出
source.connect(filter);
filter.connect(gainNode);
gainNode.connect(audioCtx.destination);

常用处理节点说明

三、使用 AnalyserNode 做可视化

AnalyserNode 能实时给出频率数据，我们用 Canvas 把它画成频谱条。

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;
gainNode.connect(analyser);
analyser.connect(audioCtx.destination);

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 400;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

function draw() {
  requestAnimationFrame(draw);
  analyser.getByteFrequencyData(dataArray);
  ctx.fillStyle = 'rgb(0,0,0)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  const barWidth = canvas.width / bufferLength;
  for (let i = 0; i < bufferLength; i++) {
    const barHeight = dataArray[i];
    ctx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth, barHeight);
  }
}
draw();

四、启动与用户交互

浏览器要求音频在用户操作后启动，因此我们绑定按钮来播放并恢复上下文。

document.addEventListener('click', function init() {
  if (audioCtx.state === 'suspended') {
    audioCtx.resume();
  }
  audioEl.play();
  document.removeEventListener('click', init);
});

小结

把来源、处理节点与分析节点按需求连接，就能组合出丰富的音频效果和可视化画面。你可以继续加入卷积混响、多声道分离等节点，做出更复杂的网页音频应用。

Web_Audio_API音频处理音频可视化修改时间：2026-07-25 18:42:11