HTML <audio> 标签不支持多音轨自动识别，需 JavaScript 管理：单 audio 元素换 src + load() 最轻量；多 audio 实例预加载可秒切；MSE 适用于封装多音轨的 MP4/MKV，但需服务端分片；UI 与状态须完全自主维护。
HTML `
用单个 audio 元素动态换 src + load()
这是最轻量、兼容性最好的方式，适合语言配音、解说版等离散音轨：
- 每次切换前先调用
audio.pause()，避免旧音频残留 - 更新
audio.src指向目标音轨文件（如"audio-zh.mp3"或"audio-en.m4a"） - 必须紧接着调用
audio.load()，否则浏览器不会重新加载新资源，play()可能静音或失败 - 推荐监听
canplaythrough事件再调用play()，它比loadeddata更可靠，表示缓冲充足可连续播放
用多个 audio 元素实现并行加载与秒切
当对切换响应速度要求高（比如直播多解说流），可预加载各音轨实例：
- 为每条音轨创建独立的
new Audio()实例，并提前设置preload="metadata"或"auto" - 所有实例共享同一
currentTime值：用户点击切换时，暂停当前轨、设置目标轨currentTime对齐、再play() - 需手动监听
timeupdate事件，以主轨时间为基准，定期校准从轨时间（补偿启动延迟） - 注意 iOS 和微信内置浏览器限制：首次
play()必须由用户手势触发，后续切换也建议绑定在click或touchstart回调中
用 MediaSource Extensions（MSE）处理封装在同一文件中的多音轨
适用于 MP4/MKV 等容器内含多音轨的场景，但需服务端配合分离与分片：
立即学习“前端免费学习笔记（深入）”；
- 浏览器无法直接读取 MP4 中的 track ID 2/3，必须由后端将各音轨导出为独立 fMP4 片段（含
moof+mdat） - 前端用
MediaSource创建源，为每条音轨新建SourceBuffer，MIME 类型需精确（如audio/mp4; codecs="mp4a.40.5"） - 切换时暂停追加旧轨数据，清空对应
SourceBuffer，再向新轨SourceBuffer追加片段，同时保持时间戳对齐（tfdt值一致） - 该方案复杂度高，仅推荐需要无缝切换、低延迟、或与视频画质档位联动的场景
UI 与状态必须完全自主维护
浏览器不提供“当前音轨 ID”或“可用音轨列表”API，所有逻辑靠开发者闭环：
- 用变量（如
currentLang = "zh"）记录当前激活音轨，并同步更新按钮高亮样式 - 若使用
<track kind="descriptions">，仅适用于无障碍音频描述，可通过textTracks列表设mode = "showing"控制显隐，但它不参与主音频解码，不能替代配音切换 - 监听
error或stalled事件，加载失败时降级提示或切换备用 URL
