HTML的<audio>标签无法调节左右声道，必须使用Web Audio API中的StereoPannerNode或手动处理AudioBuffer；balance属性及<bgsound>非标准且无效；需确保音频为真实立体声并正确连接节点链路。
HTML 的 <audio> 标签本身不能调节左右声道 —— 它只负责播放，不暴露声道控制能力。真要调左右声道，必须用 Web Audio API，核心是 StereoPannerNode 或手动处理 AudioBuffer 数据。
为什么 <audio> 标签加 balance 属性没用
你可能搜到过 balance 属性或类似 IE 时代的 <bgsound> 标签，这些在现代浏览器里完全无效：<bgsound> 只支持 IE；balance 不是 HTML5 标准属性，Chrome/Firefox/Edge 均忽略。所有基于纯 HTML 的“声道平衡”尝试都会静默失败，控制台也不会报错 —— 这是最容易踩的坑。
用 StereoPannerNode 实现左右声道平衡（推荐）
这是最轻量、最可靠的方式，适合按钮控制声像、滑块调节偏移等常见交互场景：
- 必须确保音频源是立体声（
numberOfChannels === 2），单声道输入会被自动复制到左右，调pan没实际效果 - 创建节点后，必须按顺序连接：
source → panner → destination，漏掉任一环都无声 -
panner.pan.value范围是 -1（纯左）到 +1（纯右），设为0是居中；直接赋值会瞬时跳变，需用setValueAtTime()+linearRampToValueAtTime()实现平滑过渡 - iOS Safari 对自动播放限制极严：即使用了
StereoPannerNode，首次调用play()仍必须发生在用户点击等交互事件内，否则 Promise 被 reject
需要提取/分离左右声道数据？绕过 <audio> 直接加载 ArrayBuffer
如果你的目标不是“播放时调平衡”，而是“分析左右声道差异”“导出单边音频”“做相位检测”，就别走 <audio> + createMediaElementSource 这条路 —— 媒体元素内部可能已降混或重采样，拿到的 AudioBuffer 不再反映原始声道结构：
立即学习“前端免费学习笔记（深入）”；
- 改用
fetch('song.mp3').then(r => r.arrayBuffer())加载原始二进制 - 再用
audioContext.decodeAudioData(arrayBuffer)得到真实立体声AudioBuffer - 确认
buffer.numberOfChannels === 2后，用buffer.getChannelData(0)和buffer.getChannelData(1)分别取左/右声道 Float32Array - 若要播放某一边，得新建单声道
AudioBuffer（numberOfChannels = 1），再用AudioBufferSourceNode播放
真正麻烦的点不在代码长短，而在于：你以为在调“左右声道”，其实浏览器早把双声道悄悄合并了；你以为路径写对就能播，结果文件是单声道 MP3，StereoPannerNode 调了也白调。先验证音频源是否真立体声，再动手连节点，比反复刷控制台看 undefined 高效得多。
