项目背景
目前公司在做个项目是拍照识别,识别成功请求后台的 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
,目前初步看是不能后台传一个块,前端就解码一个块,不知道有没有大佬有相关的经验,可以指导一下
1
tinyRipple 1 天前
哥们你有后续解决方案吗,我最近业余到这个需要解决
|
2
xuxiake OP @tinyRipple 最后得出的结论是小程序不支持流式语音播放😂
|