HTML5原生<audio>标签无法真正混音，必须用Web Audio API：统一AudioContext、预加载解码AudioBuffer、精确时间调度start(when)、多路connect至GainNode并设gain=0.5防削波。
HTML5 原生 <audio> 标签无法真正混音，所有“同时播放多个音频”的做法只是并发触发，各轨独立解码、无统一时间轴、不可控增益与相位，更拿不到 PCM 数据做加法运算。真正的多音频源混音必须基于 Web Audio API，核心是将多个音频源（Buffer、Stream 或 Oscillator）在同一个 AudioContext 中按采样点对齐叠加，并主动防削波。
统一上下文与预加载解码
混音的前提是所有音轨共享同一时间基准和信号路径：
- 只创建一个
AudioContext实例，复用它管理全部音频节点 - 所有音频资源通过
fetch().then(r => r.arrayBuffer())获取二进制数据，再调用context.decodeAudioData()解码为AudioBuffer - 解码结果缓存起来，后续播放直接复用，避免重复解码阻塞主线程
- 首次播放必须由用户手势触发（如 click），调用
context.resume()激活上下文，否则 Chrome/Firefox 默认静音
精确同步启动与时间调度
混音不是“一起点播放”，而是用 context.currentTime 精确控制每轨起始时刻：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 每轨使用
source.start(when, offset)，其中when是绝对时间戳（如context.currentTime + 0.02），而非source.start() - 若需跳转或拖动进度，用
offset参数指定从 Buffer 的哪一帧开始播放，保持多轨逻辑对齐 - 中途某轨偏移时，可暂停后重新调用
start(context.currentTime, currentSamplePos)即时追平主时间线
混音链路设计与防削波处理
叠加方式影响音质与稳定性，关键在于控制增益与通道布局：
立即学习“前端免费学习笔记（深入）”；
- 简单叠加推荐多路
.connect(mixGain)→ 同一GainNode→.connect(context.destination) -
GainNode.gain.setValueAtTime(0.5)是安全起点，两路满幅信号相加后不超 [-1, 1] - 避免直接相加后爆音：可对每轨 Buffer 预归一化，或动态计算峰值后缩放再叠加
-
ChannelMergerNode不等于混音器，它只拼接通道（如双声道+双声道→四声道），最终仍需手动合并到立体声输出
实时流与动态混音扩展
除静态文件外，麦克风、合成波形、甚至第三方 WebRTC 流也能纳入同一混音图：
- 麦克风流：用
context.createMediaStreamSource(stream)接入 - 合成音：用
context.createOscillator()生成正弦/方波等，再连接滤波、增益等节点 - 动态调节：每个音轨可单独挂
StereoPannerNode控左右分布，或用GainNode做音量自动化（如exponentialRampToValueAtTime实现淡入） - 导出需求：用
OfflineAudioContext渲染混音结果，再封装 WAV 头部生成 Blob 下载
