阶段 6 · 声音图基础22 分钟
声音图：增益、声像与参数自动化
GainNode、StereoPanner 与 AudioParam
搭建可交互声音图，用滑杆控制响度与左右声像，并用 AudioParam 安排平滑变化。
LEARNING GOALS
先明确本课目标
1
组合多个 AudioNode
2
用 AudioParam 避免突变爆音
3
理解 fan-in 与 fan-out 连接
MENTAL MODEL · 再建立心智模型
AudioNode 决定“信号经过哪里”，AudioParam 决定“参数随音频时间怎样变化”；两者一起构成实时声音程序。
MINIMAL EXAMPLE
为什么不直接反复给 gain.value 赋值？
AudioParam 的调度方法在音频时间线上生成平滑参数曲线，避免主线程定时抖动和采样不连续造成的 click/pop。
javascriptconst now = context.currentTime;
gain.gain.cancelScheduledValues(now);
gain.gain.setValueAtTime(gain.gain.value, now);
gain.gain.linearRampToValueAtTime(0.2, now + 0.08);- 取消旧计划 交互变化前先处理尚未执行的参数事件。
- 固定当前起点 用当前值建立连续曲线的起始点。
- 按音频钟渐变 目标值和结束时间都由 AudioContext 时间解释。
响度和声像变化跟随音频时钟平滑过渡，即使主线程偶尔繁忙也更稳定。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
音视频基础AudioContextWeb Audio 节点图的执行环境，提供采样率、音频时间轴和最终输出 Destination。音视频基础AudioNodeWeb Audio 图中的声音源、处理器、分析器或输出节点，通过 connect 建立信号流。音视频基础AudioParam可在音频时间线上进行采样精度自动化的节点参数，用于平滑控制增益、频率等数值。音视频原理Audio Channel一条独立采样和传输的声音信号序列；左、右、中置、环绕和低频效果（LFE）等角色各自对应一个声道。音视频基础GainNodeWeb Audio 中把输入样本乘以 gain 参数的增益节点，用于音量、淡入淡出和包络控制。音视频基础Audio Graph通过 connect 把声源、处理节点、分析节点和 Destination 组成的有向声音处理网络。音视频基础StereoPannerNodeWeb Audio 中用 pan 参数在左右声道间分配声音的立体声声像节点，取值通常为 -1 到 1。音视频基础Automation按 AudioContext 时间轴预先安排 AudioParam 数值变化的机制，可实现无爆音的斜坡、曲线和定时控制。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
实现一条 dry/wet 并行效果链并保持总响度基本稳定。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
参数也是时间序列
直接赋值可能在采样边界产生不连续。setTargetAtTime、linearRampToValueAtTime 等方法能在音频时钟上安排平滑变化。
连接图可以动态重组
节点可共享输入或分出多路效果，但复杂图要明确所有权，避免重复 connect 导致意外叠加。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
节点连接表达结构，AudioParam 自动化表达随时间变化。
WebGL
声音图能并联、混音、滤波和自动化，但需要明确连接与生命周期。
WebGPU
直接设置元素 volume/pan 适合简单播放控制，状态少且易维护。
把声音图当成长期资源建立，交互只更新 AudioParam，避免反复重建节点。