求助，如何在微信小程序中实现流式播放音频片段

[HC-miss]

我通过

 // #ifdef H5
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
// #endif
// #ifdef MP-WEIXIN
this.audioCtx = wx.createWebAudioContext()
// #endif

实现了一版同时支持H5以及微信小程序流式播放的代码，很简陋而且在每段音频切换时出现爆音，我看了作者的代码会在每段音频加入淡入淡出效果，我试了也不太行，目前以自动以缓冲区合并MP3二进制流的形式去播放，仍然无法解决频切换时出现爆音，只是延长了爆音时间间隔。

请问有没有什么办法实现微信小程序的流式播放？

[HC-miss]

利用BufferSourceNode的onended来实现的线性播放，利用rxjs的Subject实现的流式音频解码处理。

[xiangyuecn]

利用onended去播放下一段数据，估计这个延迟会很大，导致播放段断断续续的，有淡入淡出的应该不是爆音

可以把onended和下次播放的时间差打印出来，分析一下

[HC-miss]

利用onended去播放下一段数据，估计这个延迟会很大，导致播放段断断续续的，有淡入淡出的应该不是爆音

可以把onended和下次播放的时间差打印出来，分析一下

测试了一下，因为BufferSourceNode只提供了start方法，没有提供对应的onStart方法，所以只能从onended到调用start来判断延迟，测试得到的时间戳相差为0

onended 1740534773559
start 1740534773559

应该是start之后启动播放的延迟，有一点点卡顿。

[HC-miss]

利用rxjs的Subject实现的流式音频解码处理，在队列（audioBufferQueue）中缓存了所有通过decodeAudioData解码好的AudioBuffer对象，通过递归调用playNextAudio创建BufferSourceNode进行的播放。

 /**
   * 播放 AudioBuffer 并在播放完成后处理下一个
   */
  playNextAudio() {
    if (this.audioBufferQueue.length === 0) {
      this.currentSource = null
      return
    }
    // 获取当前音频并应用淡入淡出
    const audioBuffer = this.audioBufferQueue.shift()

    this.currentSource = this.audioCtx.createBufferSource()
    this.currentSource.buffer = audioBuffer

    // 设置淡出结束时自动播放下一个音频
    this.currentSource.onended = () => {
      console.log('onended', new Date().getTime())
      this.currentSource.disconnect()
      this.playNextAudio()
    }

    this.currentSource.onerror = (error) => {
      console.error('Error during audio playback:', error)
      if (this.onErrorCallback) {
        this.onErrorCallback('An error occurred during playback.')
      }
      this.currentSource = null
      this.playNextAudio()
    }

    // 连接到增益节点
    this.currentSource.connect(this.audioCtx.destination)
    console.log('start', new Date().getTime())
    this.currentSource.start()
  }

[HC-miss]

利用rxjs的Subject实现的流式音频解码处理，在队列（audioBufferQueue）中缓存了所有通过decodeAudioData解码好的AudioBuffer对象，通过递归调用playNextAudio创建BufferSourceNode进行的播放。

/**

• 播放 AudioBuffer 并在播放完成后处理下一个
  */
  playNextAudio() {
  if (this.audioBufferQueue.length === 0) {
  this.currentSource = null
  return
  }
  // 获取当前音频并应用淡入淡出
  const audioBuffer = this.audioBufferQueue.shift()

this.currentSource = this.audioCtx.createBufferSource()
this.currentSource.buffer = audioBuffer

// 设置淡出结束时自动播放下一个音频
this.currentSource.onended = () => {
  console.log('onended', new Date().getTime())
  this.currentSource.disconnect()
  this.playNextAudio()
}

this.currentSource.onerror = (error) => {
  console.error('Error during audio playback:', error)
  if (this.onErrorCallback) {
    this.onErrorCallback('An error occurred during playback.')
  }
  this.currentSource = null
  this.playNextAudio()
}

// 连接到增益节点
this.currentSource.connect(this.audioCtx.destination)
console.log('start', new Date().getTime())
this.currentSource.start()

}

从缓存AudioBuffer改成缓存BufferSourceNode也无法改善。

[xiangyuecn]

mp3每次都是独立的解码也会有点问题，首尾可能会多点，每次解码的时候，可以一次性解码3段数据，提取出中间的解码结果去播放

老的已经解码了的一段，当前要解码的一段，最新的未解码的一段

[yl0412]

同求一个比较好的方案

[HC-miss]

我对音频这块不太理解，但是目前知道的是，WAV格式的音频必须得有头信息才能被正确解码，但是MP3格式的我没做任何处理直接进行数据拼接就可以播放了。
也有可能只有MP3多段音频切换才有卡顿？

[lidongpeng888]

我们的方案是 适应队列分段播放音频流，还会有电流和爆音，调整服务端返回音频流的片段大小和频次，尽量找一个适中的

[HC-miss]

对接的阿里云的实时转语音接口，控制不了服务端的响应，不过目前通过拼接WAV数据播放的卡顿情况可以接受了。