html5音频节点链通过connect()方法显式声明信号流向、通道索引和处理顺序，需在用户交互后激活audiocontext，构建从音源到destination的链路，并支持混音、精准路由与动态重路由。
构建 HTML5 音频节点链（Audio Graph）不是把节点“拖线连起来”，而是用 connect() 明确声明信号流向、通道索引和处理顺序。它是一套可预测、可调试、支持动态切换的音频数据流系统，关键在理解连接规则、节点生命周期和路由意图。
基础连接：从音源到扬声器
最简链路需三个要素：音频上下文、音源节点、输出目标。所有连接必须发生在用户交互触发后（如点击播放），否则 AudioContext 可能处于 suspended 状态。
- 先创建上下文：
const ctx = new (window.AudioContext || window.webkitAudioContext)(); - 接入音源：可用
ctx.createMediaElementSource(audioEl)（已有 audio 元素）、ctx.createBufferSource()（预加载音频缓冲）或ctx.createOscillator()（合成波形） - 链式连接：例如
source.connect(filter).connect(gain).connect(ctx.destination)，每步都返回目标节点，便于链式调用 - 注意 destination 是特殊节点，代表系统扬声器；不能对它调用
connect()，只能作为终点
多路混音与并行处理
混音不是“自动叠加”，而是显式构造多条路径并汇入同一目标。直接多次 connect() 到同一个节点即实现加法混音；若需独立控制各路电平或通道布局，则要用 ChannelMergerNode 或 GainNode 分流。
- 简单混音：两个音源分别连到同一个 GainNode，再输出到 destination —— 它们会自动相加
- 立体声分离：用
ctx.createChannelSplitter(2)拆分左右声道，各自处理后再用ctx.createChannelMerger(2)合并 - 干湿分离示例：原始信号一路直通（干路），另一路经 DelayNode + GainNode 处理（湿路），最后用 merger 合并两路，再送至输出
精准路由：输出/输入索引控制
并非所有节点都是单进单出。connect(destination, outputIndex, inputIndex) 是实现复杂路由的核心能力，尤其在多通道或自定义处理场景中不可替代。
-
outputIndex指当前节点的第几个输出（如 StereoPannerNode 默认有 2 输出，但通常只用 0；ChannelSplitter 输出数等于构造参数） -
inputIndex指目标节点的第几个输入（如 ChannelMergerNode 的每个输入对应一个待合并通道） - 常见组合：将 Splitter 的左输出（index 0）连到 Merger 输入 0，右输出（index 1）连到 Merger 输入 1；或把 Oscillator 输出连到 ConvolverNode 的第 0 输入（ConvolverNode 支持多输入用于卷积混响）
动态重路由与安全断开
运行时切换信号流是交互式音频应用的基础能力。disconnect 必须精准，重连前要确保节点仍存活且未被垃圾回收。
- 清除全部连接：
node.disconnect() - 仅断开某条路径：
node.disconnect(destination)或更精确地node.disconnect(destination, outputIndex, inputIndex) - 重连前检查：节点是否仍在 context 中（
node.context === ctx），避免 “InvalidStateError” - 反馈环路需谨慎：如需循环路径（如延迟回授），必须插入 DelayNode 控制延迟时间，并用 GainNode 将增益压在 1 以下，防止啸叫或爆音
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
