Vue+WebSocket+WaveSurferJS如何构建H5长尾词聊天室？

本文共计2267个文字，预计阅读时间需要10分钟。

“在实现语音合成、语义分析、机器翻译等算法的后端交互时，页面可以设计成更人性化、亲切的方式。我们采用类似聊天对话的实现方式，效果如下：智能客服（输入文本）“

引言

在与实现了语音合成、语义分析、机器翻译等算法的后端交互时，页面可以设计成更为人性化、亲切的方式。我们采用类似于聊天对话的实现，效果如下：

• 智能客服（输入文本，返回引擎处理后的文本结果）

• 语音合成（输入文本，返回文本以及合成的音频）

如上图所示，返回文本后，再返回合成出的音频。
音频按钮嵌在对话气泡中，可以点击播放。

• 语音识别（在页面录制语音发送，页面实时展示识别出的文本结果）

实现功能及技术要点

1、基于WebSocket实现对话流
页面与后端的交互是实时互动的，所以采用WebSocket协议，而不是HTTP请求，这样后端推送回的消息可以实时显示在页面上。
WebSocket的返回是队列的、无序的，在后续处理中我们也需要注意这一点，在后文中会说到。
2、调用设备麦克风进行音频录制和转码加头，基于WebAudio、WaveSurferJS等实现音频处理和绘制
3、基于Vue的响应式页面实现
4、CSS3 + Canvas + JS 交互效果优化

• 录制音频CSS动画效果
• 聊天记录自动滚动

下面给出部分实现代码。