WebAudio（Web Audio API）概述
1. 什么是 WebAudio
WebAudio 是一套在浏览器中进行音频生成、处理、分析和播放的高级 JavaScript API。它把音频看作可编程的信号流，开发者可以在页面里实时合成声音、添加效果、进行空间化渲染，甚至把麦克风输入与网络流媒体结合使用。相较于传统的 <audio> 标签只能播放已有音频文件，WebAudio 提供了对音频数据的底层控制，适合构建音乐合成器、游戏音效、音频可视化等交互式音频应用。
2. 核心概念与架构
| 核心对象 | 作用 |
|---|---|
| AudioContext | 音频上下文，整个音频图的根节点，负责创建、管理所有音频节点并提供时间基准（currentTime） |
| AudioNode（节点） | 处理单元，分为 SourceNode（音源，如 OscillatorNode、AudioBufferSourceNode）、ProcessingNode（效果，如 GainNode、BiquadFilterNode、AnalyserNode）以及 DestinationNode（输出，通常是扬声器） |
| connect / disconnect | 节点之间通过有向图方式连接，形成音频信号流；可以随时重新连线实现动态路由 |
| AudioWorklet / ScriptProcessorNode | 用于自定义 DSP（数字信号处理）代码，支持高精度、低延迟的实时运算 |
3. 主要功能与特性
- 实时音频合成与处理：OscillatorNode 能生成正弦、方波、锯齿等波形；Gain、Delay、Convolver 等节点提供增益、延迟、混响等效果。
- 低延迟与精准时间控制：所有时间以秒为单位，
AudioContext.currentTime提供全局时间基准，适合节拍器、音乐游戏等对时序要求严格的场景。 - 空间化与立体声渲染：PannerNode、StereoPannerNode 可实现 3D 声场定位，常用于 VR/AR 音频和沉浸式音乐。
- 音频分析：AnalyserNode 输出频谱或时域数据，配合 Canvas 可实现波形、频谱可视化。
- 与媒体流结合：可以把
MediaStream（麦克风、WebRTC）接入音频图，实现实时录音、语音识别或网络音频混合。 - 跨平台兼容：只要浏览器实现了标准（大多数现代浏览器均已支持），代码在 PC、移动端均可运行。
4. 浏览器支持情况
- 完整支持：Chrome、Edge（Chromium 版）、Firefox、Safari 等主流浏览器均已实现 WebAudio，部分仍需前缀
webkitAudioContext。 - 不支持：Internet Explorer（包括 IE11）以及极简版浏览器（如 Opera Mini）缺乏或仅提供极少功能。
- 移动端差异：iOS Safari 与 Android Chrome 均支持核心功能，但旧版 Android 浏览器可能需要前缀或不完整实现。
5. 常见使用场景
| 场景 | 典型实现方式 |
|---|---|
| 游戏音效 | 使用 OscillatorNode 生成即时音效，配合 GainNode、BiquadFilterNode 调整音色 |
| 音乐播放器 / 合成器 | 通过 AudioBufferSourceNode 播放音频文件，或用 OscillatorNode 合成乐器音色，结合 AudioWorklet 实现自定义合成器 |
| 音频可视化 | AnalyserNode 提供频谱数据，配合 Canvas 绘制波形或频谱图 |
| 实时语音处理 | 把 navigator.mediaDevices.getUserMedia 获得的麦克风流接入音频图，实现降噪、回声消除或语音识别前置处理 |
| 交互式教育 / 交互艺术 | 利用 AudioContext 的精准时间控制，配合 UI 触发音符或节拍，实现交互式音乐教学或声画同步艺术 |
6. 简单代码示例（创建一个正弦波并播放）
// 创建音频上下文（兼容前缀）
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// 创建振荡器节点（正弦波）
const oscillator = audioCtx.createOscillator();
oscillator.type = 'sine'; // 波形类型
oscillator.frequency.value = 440; // A4 音高（Hz）
// 创建增益节点控制音量
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.2; // 音量 20%
// 连接节点：振荡器 → 增益 → 输出（扬声器）
oscillator.connect(gainNode).connect(audioCtx.destination);
// 启动振荡器，播放 2 秒后停止
oscillator.start();
setTimeout(() => oscillator.stop(), 2000);
这段代码展示了 AudioContext、OscillatorNode、GainNode 的基本使用方式，适合作为入门示例。
小结
WebAudio 将浏览器变成了功能强大的音频处理平台，凭借实时合成、低延迟、丰富的节点体系以及跨平台特性，已经成为网页音乐、游戏音效、音频可视化以及实时语音交互等场景的首选技术。只要目标用户使用现代浏览器，就能充分利用其强大能力构建丰富的交互式音频体验。
声明：文章均为AI生成，请谨慎辨别信息的真伪和可靠性！