如何在JavaScript中实现低延迟自适应抖动缓冲（Jitter Buffer）

问题背景 #

在localhost环境下测试音频收发：

• 发送端平均间隔：2.89ms
• 接收端平均间隔：2.92ms
• 标准固定间隔：2.90ms

缓冲设计为128*N（128是单数据块大小，N为内存保留块数即延迟），理论计算N=2足够，但实际需设为N=16才能保证正常发声。当前使用简单FIFO缓冲，满时直接替换旧块，希望实现可就地修正间隔波动的低延迟自适应抖动缓冲。

当前实现代码如下：

_buffer = [];

BUFFER_SIZE = 8;

_isStarted = false;

readIndex = -1

// 收到数据包时触发此回调
_onReceivePacket = ( event ) => {
    let chunks = [];
    // 每个chunk长度为128
    for ( let chunk of event.data ) {
      chunks.push( new Float32Array( chunk ) );
    }
    if ( this._buffer.length < this.BUFFER_SIZE ) {
      this._buffer.unshift( chunks );
      this.readIndex++;
    } else {
      this._buffer.splice( 0, 1 );
      this._buffer.unshift( chunks );
      this._isStarted = true;
    }
}

// 将缓冲数据复制到播放输出流
_pullOut ( output ) {
    try {
      for ( let i = 0; i < output.length; i++ ) {
        const channel = output[ i ];
        for ( let j = 0; j < channel.length; j++ ) {
          channel[ j ] = this._buffer[ this.readIndex ][ i ][ j ];
        }
      }
      if ( this.readIndex - 1 !== -1 ) {
        this._buffer.splice( this.readIndex, 1 );
        this.readIndex--;
      }
    } catch ( e ) {
      console.log( e, this._buffer, this.readIndex );
    }
}

问题分析 #

当前FIFO缓冲的核心问题：

• 仅依赖固定大小缓冲应对抖动，无法根据实际收发间隔动态调整延迟
• 满缓冲时直接丢弃旧块，导致音频丢帧或卡顿
• 未对间隔波动做平滑处理，微小偏差累积后引发播放异常

自适应抖动缓冲实现思路 #

核心设计要点 #

• 动态延迟调整：根据收发间隔的统计数据（均值、偏差）实时调整缓冲保留的块数N
• 就地平滑修正：通过音频插值/重采样，在播放时修正相邻块的间隔偏差，避免丢帧或重复播放
• 环形缓冲优化：用索引标记读写位置，替代频繁数组操作，减少性能开销

具体实现步骤 #

1. 统计收发间隔：记录每个数据包的到达时间，计算与标准间隔的偏差
2. 动态调整目标延迟：根据偏差累积情况，在最小延迟（N=2）和最大延迟（N=16）之间动态调整目标缓冲深度
3. 平滑播放控制：当缓冲深度偏离目标值时，通过轻微调整播放速度（插值/重采样）拉回缓冲深度，避免突变
4. 环形缓冲重构：用读写索引替代数组splice/unshift，提升性能

完整实现代码 #

class AdaptiveJitterBuffer {
  constructor() {
    // 环形缓冲存储，每个元素是[时间戳, 音频块]
    this._buffer = [];
    // 缓冲最大容量（对应N=16）
    this._maxSize = 16;
    // 初始目标延迟（对应N=2）
    this._targetDelay = 2;
    // 读写索引
    this._writeIndex = 0;
    this._readIndex = 0;
    // 缓冲当前存储的块数
    this._count = 0;
    // 记录上一个数据包的到达时间
    this._lastArrivalTime = null;
    // 标准间隔（ms）
    this._standardInterval = 2.90;
    // 播放速度调整系数（初始为1.0）
    this._playbackRate = 1.0;
    // 上一次播放的时间
    this._lastPlayTime = null;
  }

  // 收到数据包时触发的回调
  _onReceivePacket(event) {
    const now = performance.now();
    // 解析音频块
    let chunks = [];
    for (let chunk of event.data) {
      chunks.push(new Float32Array(chunk));
    }

    // 记录数据包到达时间并调整目标延迟
    if (this._lastArrivalTime) {
      const interval = now - this._lastArrivalTime;
      this._adjustTargetDelay(interval);
    }
    this._lastArrivalTime = now;

    // 写入环形缓冲
    if (this._count < this._maxSize) {
      this._buffer[this._writeIndex] = [now, chunks];
      this._writeIndex = (this._writeIndex + 1) % this._maxSize;
      this._count++;
    } else {
      // 缓冲已满，替换最旧块并强制加快播放速度
      this._buffer[this._writeIndex] = [now, chunks];
      this._writeIndex = (this._writeIndex + 1) % this._maxSize;
      this._playbackRate = 1.05;
    }
  }

  // 根据到达间隔调整目标延迟
  _adjustTargetDelay(interval) {
    const deviation = interval - this._standardInterval;
    if (deviation > 0.1 && this._targetDelay < this._maxSize) {
      // 到达间隔偏大，增加目标延迟
      this._targetDelay = Math.min(this._targetDelay + 1, this._maxSize);
    } else if (deviation < -0.1 && this._targetDelay > 2) {
      // 到达间隔偏小，降低目标延迟
      this._targetDelay = Math.max(this._targetDelay - 1, 2);
    }
  }

  // 将缓冲数据复制到播放输出流，同时做平滑修正
  _pullOut(output) {
    const now = performance.now();
    if (this._count === 0) {
      // 缓冲为空，填充静音
      for (let i = 0; i < output.length; i++) {
        output[i].fill(0);
      }
      return;
    }

    // 调整播放速度，拉回缓冲深度到目标值
    const currentDelayBlocks = this._count;
    if (currentDelayBlocks > this._targetDelay) {
      this._playbackRate = Math.min(1.02, this._playbackRate + 0.005);
    } else if (currentDelayBlocks < this._targetDelay) {
      this._playbackRate = Math.max(0.98, this._playbackRate - 0.005);
    } else {
      // 接近目标延迟，恢复正常速度
      this._playbackRate = parseFloat(this._playbackRate.toFixed(3));
      if (Math.abs(this._playbackRate - 1.0) < 0.001) {
        this._playbackRate = 1.0;
      }
    }

    // 获取当前和下一个音频块
    const [arrivalTime, currentChunk] = this._buffer[this._readIndex];
    let nextChunk = null;
    if (this._count > 1) {
      const nextIndex = (this._readIndex + 1) % this._maxSize;
      nextChunk = this._buffer[nextIndex][1];
    }

    // 音频插值处理，平滑过渡
    this._interpolateAudio(output, currentChunk, nextChunk);

    // 根据播放速度调整读索引
    if (this._lastPlayTime) {
      const elapsed = now - this._lastPlayTime;
      const expectedElapsed = this._standardInterval / this._playbackRate;
      if (elapsed >= expectedElapsed || this._playbackRate !== 1.0) {
        this._readIndex = (this._readIndex + 1) % this._maxSize;
        this._count--;
      }
    }
    this._lastPlayTime = now;
  }

  // 音频插值处理，平滑相邻块的过渡
  _interpolateAudio(output, currentChunk, nextChunk) {
    if (this._playbackRate === 1.0 || !nextChunk) {
      // 正常速度播放，直接复制
      for (let i = 0; i < output.length; i++) {
        const channel = output[i];
        for (let j = 0; j < channel.length; j++) {
          channel[j] = currentChunk[i][j];
        }
      }
      return;
    }

    // 速度调整时，进行线性插值
    for (let i = 0; i < output.length; i++) {
      const channel = output[i];
      for (let j = 0; j < channel.length; j++) {
        const t = j / channel.length;
        channel[j] = (1 - t) * currentChunk[i][j] + t * nextChunk[i][j];
      }
    }
  }
}

关键优化说明 #

1. 环形缓冲：用读写索引替代数组unshift和splice，避免频繁数组重排，大幅提升性能
2. 动态延迟调整：根据数据包到达间隔的偏差，在2-16之间动态调整目标缓冲深度，平衡延迟和抗抖动能力
3. 平滑播放速度：通过±2%以内的播放速度调整（人耳无法察觉），逐步拉回缓冲深度，避免丢帧或卡顿
4. 音频插值：调整播放速度时对相邻音频块做线性插值，保证音频过渡平滑自然

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