TTS(Text-to-speech)文字转语音使用的是阿里云的服务,文档地址:
https://help.aliyun.com/zh/isi/developer-reference/streaming-text-tts-wss
文档只给出了一些配置项的说明,以及java端的代码示例,但没有web端的。所以这篇笔记可以给web开发者参考。
首先,AI答复的消息是通过SSE(server-sent events)返回的。SSE请求的实现流程后续有时间再填坑。
代码实现中,使用了一个onReply回调来执行后续动作。 这个方法会连续多次执行,直到消息结束。
SSE是单向的,只能由服务端向客户端推送,而流式TTS这种双向通信需要通过socket来实现。
socket的实现,原本是打算用封装了心跳、房间等概念的socket.io
,但后来发现这个功能实现并不需要用到保活和长连接,发送和接收都完成以后,直接关闭socket连接即可,不用考虑那些复杂逻辑。
所以socket的连接可以直接使用vueuse
的工具方法useWebSocket
业务流程大致如下: