使用Web Audio API实现分片音频无缝播放的问题咨询

我目前正在尝试通过Web Audio API播放分片音频，整体功能可正常运行，但多数分片间的过渡不够流畅，存在极短暂的静音间隙。以下是当前的加载与播放代码：

const response = await fetch(`${this.src}`)
const reader = response.body.getReader()

let timestamptowaituntil = 0
let tolog = []
let tolog2 = []

while (true) {
    const { done, value } = await reader.read()

    if (done) {
        console.log(tolog)
        console.log(tolog2)
        console.log(this.ctx)
        break
    } else {
        let audiodata = await this.ctx.decodeAudioData(value.buffer)
        let source = this.ctx.createBufferSource()
        source.buffer = audiodata
        source.connect(this.ctx.destination)
        source.start(timestamptowaituntil, 0, audiodata.duration)
        timestamptowaituntil +=audiodata.duration
        tolog.push(audiodata)
        tolog2.push(source)
    }
}

截至目前我已尝试以下方案：

• 减少等待时间的毫秒数；
• 扣除AudioContext延迟属性对应的时长；
• 通过比特率计算UInt8Array格式数据的播放时长（结果与AudioBuffer的.duration属性略有差异，但仍存在微小间隙）。

请问如何消除这些微小的静音间隙（或避免音频重叠）？

1. 修正时间计算的精度误差 #

AudioBuffer.duration是浮点数，多次累加易产生精度偏差，改用音频缓冲区的样本数和采样率计算精确时长：

// 替换原有的时长累加逻辑
const exactDuration = audiodata.length / audiodata.sampleRate;
source.start(timestamptowaituntil, 0, exactDuration);
timestamptowaituntil += exactDuration;

2. 直接基于当前分片的结束时间调度下一个 #

避免累加误差，直接用当前分片的启动时间加精确时长，作为下一个分片的启动时间：

const actualEndTime = timestamptowaituntil + exactDuration;
// 下一个分片的启动时间直接使用该结束时间
timestamptowaituntil = actualEndTime;

3. 动态适配音频上下文的当前时间 #

异步操作（解码、网络读取）可能导致调度时间滞后，用音频上下文的实时时间调整启动时机：

const currentCtxTime = this.ctx.currentTime;
// 若计划启动时间早于当前时间，立即播放；否则按计划执行
const startTime = Math.max(timestamptowaituntil, currentCtxTime);
source.start(startTime, 0, exactDuration);
// 更新等待时间为实际结束时间
timestamptowaituntil = startTime + exactDuration;

4. 预处理分片首尾的静音段 #

部分间隙来自分片编码时的帧对齐静音，解码后可去除首尾无效静音：

// 示例：去除缓冲区首尾的静音（简单阈值判断）
const channelData = audiodata.getChannelData(0);
const silenceThreshold = 0.01;

// 跳过开头静音
let startOffset = 0;
while (startOffset < channelData.length && Math.abs(channelData[startOffset]) < silenceThreshold) {
    startOffset++;
}

// 跳过结尾静音
let endOffset = channelData.length - 1;
while (endOffset > startOffset && Math.abs(channelData[endOffset]) < silenceThreshold) {
    endOffset--;
}

// 计算有效播放时长和偏移
const effectiveDuration = (endOffset - startOffset + 1) / audiodata.sampleRate;
const startOffsetSec = startOffset / audiodata.sampleRate;
source.start(timestamptowaituntil, startOffsetSec, effectiveDuration);
timestamptowaituntil += effectiveDuration;

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