html5的元素无法直接区分左右声道，必须通过web audio api实现：先确保音频为真立体声，再用channelsplitternode拆分或getchanneldata()提取左右声道数据，并通过analysernode或audioworklet验证分离效果。
HTML5 的 <audio></audio> 元素本身不提供直接读取或区分左右声道信号的能力——它只负责播放，不暴露原始通道数据。真正要“区分左右声道的输入信号”，必须借助 Web Audio API，核心在于将音频解码为可编程的 AudioBuffer，再通过通道索引提取对应声道数据。
确认音频源是真立体声
不是所有“双耳听起来有左右感”的音频都是立体声。需确保：
- 原始音频文件本身为双声道（stereo）编码，如 WAV、FLAC 或未降混的 MP3；
- 浏览器解码后
audioBuffer.numberOfChannels === 2； - 避免使用
createMediaElementSource(audioEl)后再调用decodeAudioData，因媒体元素可能已做内部重采样或降混；推荐用fetch + arrayBuffer + decodeAudioData加载原始缓冲。
用 ChannelSplitterNode 拆分并路由左右声道
这是最直观、无需手动操作数组的方案，适合实时监听或分别处理：
- 创建
context.createChannelSplitter(2)，它会把输入的立体声流拆成两个独立输出端口； -
splitter.output[0]对应左声道（L），splitter.output[1]对应右声道（R）； - 可分别连接 GainNode、AnalyserNode 或 ScriptProcessor/AudioWorklet 进行独立分析；
- 例如：接两个
AnalyserNode，就能实时获取左右声道各自的频谱或音量强度。
用 getChannelData() 提取原始左右声道数据
若需做数学运算（如计算声道差异、相位差、生成单声道）、导出或调试，应访问底层数据：
- 调用
buffer.getChannelData(0)得到左声道 Float32Array（值域 [-1, 1]）； - 调用
buffer.getChannelData(1)得到右声道 Float32Array； - 二者长度相同，同一索引位置代表同一时刻的采样点；
- 可对比两数组在某段区间内的 RMS 值、峰值、零交叉率等，判断是否平衡或存在单边衰减。
验证左右声道是否真实分离
常见误判来源：驱动干扰、浏览器自动升频、或代码连接错误。建议实测验证：
- 播放一段明确左/右偏置的测试音频（如仅左声道有正弦波、右声道静音）；
- 用
analyser.getByteFrequencyData()分别读取两路 AnalyserNode 数据，观察左路有响应而右路接近全零； - 或用
AudioWorklet在 process() 中打印inputs[0][0][i]和inputs[0][1][i]，确认数值差异符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
