VueJS ReactJS实现AI问答小助手(2)——流式TTS文字转实时语音播放_tts 实时 js

作者：黑客灵魂 | 2024-08-21 06:14:18

踩

tts 实时 js

TTS(Text-to-speech)文字转语音使用的是阿里云的服务，文档地址：

文档只给出了一些配置项的说明，以及java端的代码示例，但没有web端的。所以这篇笔记可以给web开发者参考。

首先，AI答复的消息是通过SSE(server-sent events)返回的。SSE请求的实现流程后续有时间再填坑。

代码实现中，使用了一个onReply回调来执行后续动作。这个方法会连续多次执行，直到消息结束。

SSE是单向的，只能由服务端向客户端推送，而流式TTS这种双向通信需要通过socket来实现。

socket的实现，原本是打算用封装了心跳、房间等概念的socket.io，但后来发现这个功能实现并不需要用到保活和长连接，发送和接收都完成以后，直接关闭socket连接即可，不用考虑那些复杂逻辑。

所以socket的连接可以直接使用vueuse的工具方法useWebSocket

业务流程大致如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/1010489