html不支持多轨道音频，必须用web audio api实现：复用单个audiocontext，为每轨创建独立sourcenode+gainnode链路并统一混音，严格管理节点连接与销毁，注意ios平台的suspend恢复、解码格式限制及时间精度问题。
HTML本身不支持多轨道音频，别指望靠多个
直接写多个 <audio></audio> 标签并试图“同步播放”或“切换轨道”，在绝大多数浏览器里都会错位、卡顿、静音甚至崩溃。Safari 会拒绝同步调度，Android WebView 的 currentTime 精度极差，Chrome 下反复调用 play() 还可能触发策略拦截。真正的多轨道能力必须由 JavaScript 驱动 Web Audio API 实现，<audio></audio> 只能当容器或媒体源节点（MediaElementAudioSourceNode），不能当轨道管理器。
Web Audio API 多轨道结构怎么搭才不崩
核心是复用一个 AudioContext，为每条轨道创建独立的 AudioBufferSourceNode + GainNode 链路，最后统一混音到 context.destination。关键点不是“加多少轨道”，而是“怎么清理”：
- 每次新建轨道前，先检查
context.state === 'suspended'，如果是，必须显式调用context.resume()（iOS Safari 强制要求用户手势后才能 resume） - 每条轨道的
source和gainNode必须保存引用，销毁时逐个调用node.disconnect()；漏掉任意一个节点，滚动几十条轨道后内存暴涨、页面卡死 - 不要用
new AudioContext()创建多个实例——它不共享时钟，无法对齐时间轴，且 Safari 限制单页最多 1 个活跃 context - 播放控制必须走
source.start(context.currentTime)和source.stop(context.currentTime)，而非audio.play()；否则拖动、暂停、跳转都会失步
多格式音频如何加载进 Web Audio 才不报错
Web Audio 不吃 <source></source> 标签那一套，它只认 ArrayBuffer。所以你得自己下载、解码、缓存，不能指望浏览器 fallback：
- 用
fetch(url).then(r => r.arrayBuffer())获取原始数据，再传给context.decodeAudioData(buffer)；别用XMLHttpRequest或FileReader，兼容性差且易出错 - MP3 文件必须确保是 CBR 编码（VBR 在 Safari 上 decodeAudioData 会失败），OGG 必须是 Vorbis（不是 Opus），WAV 必须是 PCM 小端（
audio/wav） - 服务器响应头
Content-Type必须匹配：MP3 是audio/mpeg，OGG 是audio/ogg，WAV 是audio/wav；Nginx/Apache 没配对 MIME 类型，fetch 返回 200 但decodeAudioData仍会抛EncodingError - 不要在
canplay或loadedmetadata事件里开始 decode —— 这些事件在 Web Audio 场景下无意义；等 fetch 完再 decode，失败就 catch 并提示 “不支持该格式”
iOS Safari 上多轨道最常踩的三个硬坑
不是代码写错了，是平台策略卡死。绕不过，只能适配：
-
AudioContext一旦被 suspend（比如切到后台再切回来），无法自动恢复，必须等下一次用户点击才能resume()；所以每个播放/暂停按钮都要包裹context.resume().then(() => ...)，否则后续所有轨道静音 - 波形渲染若用
AnalyserNode实时分析，Safari 输出的 FFT 数据抖动极大，时间轴根本对不上；必须预处理音频（服务端或 Worker 里用OfflineAudioContext生成振幅数组），前端只做 canvas 绘图 - 轨道 UI 拖拽条的像素位置转时间，不能简单用
offsetLeft / width * duration；要乘以动态缩放系数pixelsPerSecond，且需减去context.baseLatency（Safari 上通常 0.01～0.05 秒），否则拖到 10 秒实际跳到 9.8 秒
多轨道不是堆功能，是控精度、管生命周期、防内存泄漏。iOS 上少一个 disconnect()，多一次 resume() 漏判，就足以让整个面板卡住不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
