Web Audio API如何从立体声音频输入各通道获取单个样本存入变量

Web Audio API默认采用推模式自动处理全量音频流，要实现按需拉取指定通道的单个样本，需要先将实时流入的音频样本缓存到队列中，需要时直接从队列读取即可，不需要修改你已有的双声道分离、分析器连接逻辑。

代码实现 #

1. 添加样本缓存逻辑 #

// 左右声道样本缓存队列
const leftChannelCache = [];
const rightChannelCache = [];
// 配置脚本处理节点：缓冲区大小选256即可，输入2声道，输出2声道
const bufferSize = 256;
const sampleProcessor = audioContext.createScriptProcessor(bufferSize, 2, 2);

// 连接输入源到处理节点，不需要外放的话可以不连到destination
input.connect(sampleProcessor);
sampleProcessor.connect(audioContext.destination);

// 实时接收音频块填充缓存
sampleProcessor.onaudioprocess = (event) => {
    const inputBuffer = event.inputBuffer;
    const leftBlock = inputBuffer.getChannelData(0);
    const rightBlock = inputBuffer.getChannelData(1);
    // 将当前音频块的所有样本推入缓存队列
    for (let i = 0; i < leftBlock.length; i++) {
        leftChannelCache.push(leftBlock[i]);
        rightChannelCache.push(rightBlock[i]);
    }
};

2. 封装按需取样本方法 #

// 单次获取左右声道各一个样本，缓存不足时返回null
function getSingleSample() {
    if (leftChannelCache.length < 1 || rightChannelCache.length < 1) {
        return null;
    }
    // 按时间先后顺序取出最早的样本
    const leftSample = leftChannelCache.shift();
    const rightSample = rightChannelCache.shift();
    return { left: leftSample, right: rightSample };
}

补充说明 #

• 样本为-1.0~1.0之间的32位浮点数，对应PCM音频的振幅值
• 注意：需要确保audioContext已通过用户交互（点击、触摸等）激活，否则音频处理流程不会运行
• 如果不需要消费所有历史样本，可将shift()操作替换为自定义读取偏移量，避免清空缓存
• ScriptProcessor已被官方标记为废弃，生产环境推荐改用AudioWorklet实现，避免主线程阻塞导致的音频卡顿
• 你原有通过ChannelSplitter连接双路分析器的逻辑可正常使用，无需调整

内容的提问来源于stack exchange，提问作者dllb