阶段 6 · 声音图入门18 分钟
AudioContext：建立一条可编程声音管线
Source → Gain → Destination 与用户手势
创建最小 Web Audio 节点图，用按钮启动振荡器，并观察 AudioContext 的 suspended/running 状态。
LEARNING GOALS
先明确本课目标
1
创建并恢复 AudioContext
2
连接 Oscillator、Gain 与 Destination
3
安全停止一次性 AudioScheduledSourceNode
MENTAL MODEL · 再建立心智模型
Web Audio 不是“播放一个文件”，而是搭积木：节点产生或处理音频，连接决定信号流向，Destination 把最终信号送往扬声器。
MINIMAL EXAMPLE
几行 connect 为什么就能持续产生声音？
AudioContext 在专用渲染路径上持续拉取音频块。connect() 只描述节点图结构；当 Source 启动后，浏览器会按图从 Source 计算到 Destination。
javascriptconst context = new AudioContext();
const oscillator = new OscillatorNode(context);
const gain = new GainNode(context, { gain: 0.08 });
oscillator.connect(gain).connect(context.destination);
await context.resume();
oscillator.start();- 创建声音环境 Context 提供时间基准、采样率和最终输出。
- 连接处理节点 Source 先进入 Gain，再流向 Destination。
- 用户手势恢复 resume 通常应放在点击事件中，随后再启动声源。
节点图在音频线程持续渲染，主线程不需要为每个采样点运行循环。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
音视频基础AudioContextWeb Audio 节点图的执行环境，提供采样率、音频时间轴和最终输出 Destination。音视频基础AudioNodeWeb Audio 图中的声音源、处理器、分析器或输出节点，通过 connect 建立信号流。音视频基础Autoplay Policy浏览器限制未经用户手势启动有声媒体或 AudioContext 的策略；静音播放和已获许可场景可能有不同规则。音视频基础AudioContext TimeAudioContext.currentTime 表示音频上下文从创建后推进的采样时间轴，用于精确安排节点启停和参数自动化。音视频基础OscillatorNodeWeb Audio 中生成周期波形的声源节点，可设置频率和波形，并按 AudioContext 时间轴精确启停。音视频基础GainNodeWeb Audio 中把输入样本乘以 gain 参数的增益节点，用于音量、淡入淡出和包络控制。音视频基础DestinationAudioContext 图的最终输出节点，代表当前音频设备或离线上下文的渲染目标。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
做一个带攻击、衰减、延音和释放四段包络的单音合成器。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
节点图描述信号流
connect() 建立有向边，音频渲染线程按固定采样块拉取数据。节点可以一对多、多对一，也能在运行时调整参数。
声音要由用户启动
多数浏览器会让新 AudioContext 处于 suspended。把 resume() 放进明确的点击处理器，既符合策略也让用户知道何时会发声。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
媒体元素是一台播放器，AudioContext 是一张声音处理图。
WebGL
Web Audio 把声源、增益、滤波、分析和输出连接成实时节点图。
WebGPU
声明式播放适合完整歌曲、播客和视频伴音，浏览器负责主要细节。
文件播放可由媒体元素进入 MediaElementAudioSourceNode，再接入声音图。