浏览器端直播音频消除缓冲延迟，如何调整audioNode缓冲区大小？

解决方案 #

1. 启用AudioContext低延迟模式

你当前初始化AudioContext用的是默认配置，默认会优先保证播放流畅度而非低延迟，修改初始化参数强制低延迟：

// 原来的代码：const audioContext = new window.AudioContext()
// 替换为：
const audioContext = new window.AudioContext({
  latencyHint: 'interactive', // 交互场景优先最低延迟
  sampleRate: 44100 // 和你的录制端采样率对齐，避免额外的转码缓冲
})

2. 手动控制缓冲替换原生audio默认加载逻辑

原生<audio>元素为了保证普通点播场景的播放流畅度，默认会预缓存至少3~5秒的音频数据，这是你4秒延迟的核心来源，改用MediaSource扩展API自主控制缓冲阈值：

const audioNode = document.getElementById("callAudio")
audioNode.volume = 1.0
const audioContext = new window.AudioContext({ latencyHint: 'interactive', sampleRate: 44100 })
const audioTrack = audioContext.createMediaElementSource(audioNode)
const audioGain = audioContext.createGain()
const audioDestination = audioContext.createMediaStreamDestination()
audioTrack.connect(audioGain).connect(audioDestination)

// 替换原生src赋值逻辑，改用MediaSource控制缓冲
const mediaSource = new MediaSource()
audioNode.src = URL.createObjectURL(mediaSource)

mediaSource.addEventListener('sourceopen', async () => {
  // 此处的mime类型要和你录制端输出的音频格式完全对齐，比如用webm格式就填'audio/webm; codecs="opus"'
  const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg')
  // 核心配置：设置最大缓冲时长为0.2秒，可根据你能接受的卡顿概率调整到更低
  sourceBuffer.bufferDuration = 0.2
  sourceBuffer.mode = 'sequence'

  const response = await fetch('http://localhost:12347')
  const reader = response.body.getReader()

  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    if (sourceBuffer.updating) {
      await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }))
    }
    sourceBuffer.appendBuffer(value)
    // 超过缓冲阈值就清掉旧数据，避免累积延迟
    if (sourceBuffer.buffered.length > 0) {
      const currentTime = audioNode.currentTime
      if (currentTime - sourceBuffer.buffered.start(0) > 0.5) {
        sourceBuffer.remove(sourceBuffer.buffered.start(0), currentTime - 0.1)
      }
    }
  }
})

audioNode.play().then(() => {
  console.debug("started playing after:", currentTime)
  playing = true
})

3. 调整Electron专属配置

在创建窗口的主进程代码中，给BrowserWindow的webPreferences添加低延迟相关配置：

const mainWindow = new BrowserWindow({
  webPreferences: {
    // 启用媒体低延迟优化
    experimentalFeatures: true,
    // 禁用媒体自动缓冲调整
    disableMediaSession: false,
  }
})

4. 可选优化

如果你的录制端可以调整，把MediaRecorder的timeslice参数设为100ms以内，比如mediaRecorder.start(50)，让录制端每50ms就推送一次数据块，避免服务端侧攒块带来的额外延迟。

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