微信小程序流式语音播放

[xuxiake]

项目背景

目前公司在做个项目是拍照识别，识别成功请求后台的 tts 接口，返回数据前端播放。后台是调用的阿里的服务，之前一直是用的同步，发现速度不太理想，就想改成流式的，后台边返回数据，前端边播放

实现细节

wx.request 设置 enableChunked 开启流式支持，接受数据，然后使用WebAudioContext播放，相关代码

function startPlayAudioQueue() {
  const audioQueue = this.audioQueue as WechatMiniprogram.AudioBuffer[]
  if (audioQueue.length === 0) return

  const audioBuffer = audioQueue.shift()
  if (!audioBuffer) return
  const audioContext = this.audioContext as WechatMiniprogram.WebAudioContext;
  
  let source = audioContext.createBufferSource()
  source.buffer = audioBuffer
  source.connect(audioContext.destination)
  source.start()

  source.onended = () => {
      this.startPlayAudioQueue()
  }
}

async function audioPlay() {
  this.firstAudioBuffer = false
  this.audioQueue = []
  const setRequestTask = (requestTask: WechatMiniprogram.RequestTask) => {
    this.requestTaskAudio = requestTask;
    requestTask.onChunkReceived(res => {

        const audioContext = this.audioContext as WechatMiniprogram.WebAudioContext;
        // @ts-ignore
        audioContext.decodeAudioData(res.data, (audioBuffer: WechatMiniprogram.AudioBuffer) => {
            this.audioQueue.push(audioBuffer)
            if (!firstAudioBuffer) {
                this.startPlayAudioQueue()
                this.firstAudioBuffer = true
            }
        }, (err: any) => {
            console.error('decodeAudioData fail', err)
        })
    })
  }
  text2AudioStream(params, setRequestTask)
}

目前问题

播是能播，但是明显感觉播放不流畅，一顿一顿的，块与块之间衔接不正常，看控制台日志打印，显示很多的decodeAudioData fail，目前初步看是不能后台传一个块，前端就解码一个块，不知道有没有大佬有相关的经验，可以指导一下