通过Web Audio API可实现动态音频生成与处理，首先创建AudioContext实例，再利用振荡器或缓冲源节点生成声音，如用createOscillator()输出正弦波，并通过frequency参数调节音高；实时控制可通过gainNode调节音量包络，使用exponentialRampToValueAtTime实现滑音；添加BiquadFilterNode可实现低通等滤波效果，并结合linearRampToValueAtTime动态改变截止频率；高级应用中可用createBuffer生成自定义波形，如填充Float32Array数据制作白噪声，最终通过连接节点输出到destination实现实时播放。
通过 JavaScript 的 Web Audio API 生成和处理动态音频，核心在于创建音频上下文、连接音频节点并实时控制参数。这套 API 提供了精确的低延迟音频处理能力，适合做音乐合成、音效生成或交互式声音应用。
初始化音频上下文并创建音频源
所有 Web Audio 操作都从 AudioContext 开始。你可以用它来创建振荡器、音频缓冲源或输入流。
常见做法：- 使用
new AudioContext()创建上下文实例 - 通过
createOscillator()生成正弦波、方波等基础波形 - 用
createBufferSource()播放预加载或动态生成的音频数据
例如，生成一个可调节频率的正弦波：
const ctx = new AudioContext(); const osc = ctx.createOscillator(); osc.type = 'sine'; osc.frequency.setValueAtTime(440, ctx.currentTime); // A4 音符 osc.connect(ctx.destination); osc.start();
实时控制音频参数实现动态变化
Web Audio API 支持在运行时修改音量、频率、滤波等属性，从而实现动态效果。
立即学习“Java免费学习笔记（深入）”；
关键技巧：- 使用
gainNode控制音量包络（attack、decay、sustain、release） - 调用
frequency.exponentialRampToValueAtTime()实现滑音效果 - 结合
setTimeout或requestAnimationFrame触发定时变化
比如让音高在 2 秒内从 220Hz 上升到 880Hz：
osc.frequency.setValueAtTime(220, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 2);
添加效果处理：滤波与反馈
通过连接各类音频节点，可以构建复杂的处理链。
常用节点组合：
-
BiquadFilterNode：实现低通、高通、带通滤波 -
WaveShaperNode：添加失真效果 -
DelayNode和GainNode构建简易混响或回声
示例：给声音加低通滤波并随时间改变截止频率：
const filter = ctx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.value = 1000; osc.connect(filter); filter.connect(ctx.destination);// 动态调整滤波频率 filter.frequency.linearRampToValueAtTime(200, ctx.currentTime + 3);
动态生成音频数据（高级用法）
若需完全自定义波形，可用 createBuffer() 和 createBufferSource() 手动生成样本。
步骤如下：
- 创建音频缓冲区：
ctx.createBuffer(通道数, 样本数, 采样率) - 填充 Float32Array 数据（如正弦波、噪声）
- 用 BufferSource 播放
生成 1 秒白噪声示例：
const buffer = ctx.createBuffer(1, ctx.sampleRate, ctx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < data.length; i++) {
data[i] = Math.random() * 2 - 1;
}
const source = ctx.createBufferSource();
source.buffer = buffer;
source.connect(ctx.destination);
source.start();基本上就这些。掌握节点连接逻辑和参数调度机制后，就能做出节奏变化、交互响应甚至音乐可视化的声音系统。关键是理解“音频图”结构——所有节点必须正确连到 destination 或中间处理器才能发声。
