微信小程序流式语音播放

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 445 天前的主题，其中的信息可能已经有所发展或是发生改变。

项目背景

目前公司在做个项目是拍照识别，识别成功请求后台的 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)
}