V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xuxiake
V2EX  ›  前端开发

微信小程序流式语音播放

  •  
  •   xuxiake · 93 天前 · 583 次点击
    这是一个创建于 93 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目背景

    目前公司在做个项目是拍照识别,识别成功请求后台的 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,目前初步看是不能后台传一个块,前端就解码一个块,不知道有没有大佬有相关的经验,可以指导一下

    4 条回复    2024-11-06 11:11:11 +08:00
    tinyRipple
        1
    tinyRipple  
       6 天前
    哥们你有后续解决方案吗,我最近业余到这个需要解决
    xuxiake
        2
    xuxiake  
    OP
       5 天前
    @tinyRipple 最后得出的结论是小程序不支持流式语音播放😂
    tinyRipple
        3
    tinyRipple  
       3 天前
    @xuxiake 那最后你们是怎么解决飞流式的延迟的😩
    tinyRipple
        4
    tinyRipple  
       3 天前
    @xuxiake 那最后你们是怎么解决非流式的延迟的😩
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1772 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:38 · PVG 00:38 · LAX 08:38 · JFK 11:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.