Web Audio API 通过 AudioContext 构建可编程音频处理图，核心包括挂起后需 resume 的上下文、connect 连接的音频节点链、支持 setValueAtTime 等自动化平滑控制的参数机制，以及需显式接入链路的 AnalyserNode 实时分析能力。
JavaScript 通过 Web Audio API 实现高性能、低延迟的音频处理，它不是简单播放声音，而是构建一个可编程的音频处理图（audio processing graph），让你能精确控制声音的生成、变换与输出。
核心概念：音频上下文（AudioContext）是起点
所有 Web Audio 操作都始于一个 AudioContext 实例，它相当于音频系统的“引擎”和“时间系统”。它管理音频节点的生命周期、调度事件，并提供高精度的时间参考（比 Date.now() 或 setTimeout 更准）。
- 创建方式：
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();（兼容旧版 Safari） - 上下文默认处于“挂起（suspended）”状态，用户交互（如点击按钮）后需调用
audioCtx.resume()才能开始播放或处理，这是浏览器为节省资源和防止自动播放而设的策略。 - 它提供
currentTime属性——一个单调递增的秒数，用于精确调度（例如：2.5 秒后启动振荡器）。
音频节点（AudioNode）构成处理链
Web Audio 的核心是节点：每个节点完成特定功能（生成、过滤、混音、分析等），通过 connect() 方法连接成图。常见类型包括：
-
源节点：如
OscillatorNode（合成波形）、AudioBufferSourceNode（播放加载好的音频文件）、MediaStreamAudioSourceNode（接入麦克风或屏幕共享流）。 -
效果节点：如
BiquadFilterNode（高低通/带通滤波）、GainNode（调节音量）、ConvolverNode（卷积混响）、DelayNode（延迟回声）。 -
目的地节点：通常是
audioCtx.destination（即扬声器），也可连到其他节点作中间路由（如先混音再统一流控）。
连接是单向的：A.connect(B) 表示 A 的输出送入 B 的输入；多个节点可连接到同一目标（自动混音），但一个节点不能直接连自己（会报错）。
立即学习“Java免费学习笔记（深入）”；
实时处理的关键：参数自动化（Automation）
几乎所有节点参数（如 gain.value、frequency.value）都支持随时间变化的自动化，避免“突变”，实现平滑过渡。
- 用
setValueAtTime()设定初始值 - 用
linearRampToValueAtTime()或exponentialRampToValueAtTime()创建斜坡变化 - 用
setTargetAtTime()实现平滑趋近（类似模拟电路的 RC 响应）
例如：让音量在 0.5 秒内从 0 淡入到 1：gainNode.gain.setValueAtTime(0, audioCtx.currentTime); gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.5);
获取音频数据：分析与可视化
通过 AnalyserNode 可实时提取频谱（FFT）或时域波形数据，用于可视化或音频反应逻辑：
- 创建后需设置 FFT 大小（如
analyser.fftSize = 2048），决定频率分辨率 - 用
analyser.getByteFrequencyData(array)获取 0–255 范围的频域能量分布 - 用
analyser.getByteTimeDomainData(array)获取 ±128 的波形采样点（适合画 oscilloscope 效果） - 注意：这些方法是“拉取式”的，需在动画循环（
requestAnimationFrame）中反复调用才能持续更新。
不复杂但容易忽略：AnalyserNode 本身不改变音频流，只“旁听”经过它的数据，因此必须连接在处理链中（哪怕只是 source → analyser → destination）。
