vueJS React前端实现AI问答小助手(1)——播放语音_vue 语音助手

项目需要开发一个类似微信操作体验的AI问答小助手，记录下开发过程。

先从最简单的功能说起。

第一步是实现语音播放功能，也就是将从TTS(Text-to-speech)文字转语音服务中获取到的二进制语音文件播放出来。

项目使用vite+vue3+typescript搭建，基于vitesse脚手架，且尽可能使用了vueuse的工具库。

因此实现这样一个语音播放器，也会尽可能利用vueuse和使用组合式函数风格。

首先遇到的第一个坑，是浏览器的策略限制禁止自动播放。

详情可见[MDN文档](https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide#方法一：关闭%

音频的播放行为必须来自用户操作。

在产品的业务流程中，用户会先按住底部语音按钮，并在松开时发送用户语音消息。然后AI进行回复，同时播放语音。

因此，我们的使用场景理论上是满足自动播放的条件的。

只是在微信等浏览器环境下，存在一些更严格的策略限制，比如用户操作大约5秒以后才创建出来的Audio元素仍然无法自动播放。

所以，最终的实现思路如下：

1. 页面初始化时就创建一个audio元素，并设置其src为一段无声的音频。
2. 当用户进行任意符合策略的操作时，执行play动作。
3. 当AI回复消息或者需要播放消息语音时，重新设置audio元素的s