vue+百度语音合成（TTS）实现语音播报功能

最新推荐文章于 2024-06-10 17:04:39 发布
最新推荐文章于 2024-06-10 17:04:39 发布
阅读量7.1k 收藏 11
点赞数 1
分类专栏： Vue第三方库的使用 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35620498/article/details/102794988
版权

语音合成：也被称为文本转换技术（TTS），它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。

刚开始项目需求订单实时播报，最初采用的H5的语音合成Speech Synthesis API，结果发现能正常收到服务端的消息推送，谷歌浏览器不会响，火狐也不会响，在网上找了很多说什么的都有，后来跟着网上的步骤各种一通调试，最后也没响果断放弃；

现在选择百度提供的语音合成api，分分钟搞定，直接上代码：

在你接受到消息的地方调起handleSpeak方法即可！

小love容儿0216
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
百度语音合成
tangzheng828的博客
05-29 913
下载百度语音合成Sample1：添加：assests（:离线语音合成需要），libs2：离线语音 初始化 时间长,最好service中先初始化public class InitSpeechSynthesizer { private Context context; private SpeechSynthesizer speechSynthesizer; public Ini...
tts-vue-1.9.0 语音合成
05-23
总结起来，"tts-vue-1.9.0"是一个利用Vue.js框架实现的语音合成功能库，它结合了Vue.js的强大功能和TTS技术，为开发者提供了一种学习和实践的平台。通过这个项目，不仅可以学习到前端开发知识，还能深入了解语音合成...
Vue 实现电脑语音播报
路虽远行则将至，事虽难做则必成。
12-14 4852
最近项目有需求要语音播报，搜索了一下，总结了一下。有3个方法把特定的文字让电脑语音播报出来，前提是电脑有蓝牙模块有声音的前提下。第一种 Web Speech API h5新提供的一个原生语音识别技术的API，可以将文本转成语音播放。第二种 接入百度的tts服务，个人开发者有免费额度，时效半年，兼容性较好，就是需要外网。第三种 Speak-tts插件 speak-tts是基于Web Speech API封装而成，优化了长语音不流畅的问题，还改进了许多不合理的地方。
vue3中使用speak-tts插件进行语音播报
一个超爱喝可乐的web前端攻城狮
06-27 4076
vue3中使用speak-tts插件进行语音播报
Android TTS语音播报实践
最新发布
轻口味的专栏
06-10 1813
本文总结了TTS的现状及发展，并介绍了移动端实现TTS的几种方式以及如何系统提供的TextToSpeech API、系统API的局限、如何做兼容性等。
vue实现百度语音合成的实例讲解
01-21
这里我完全依照百度提供的语音合成api来做：https://ai.baidu.com/docs#/TTS-Online-Node-SDK/top 直接去看node.js SDK。 1.换取access_token： 参考：https://ai.baidu.com/docs#/TTS-API/top，在这里用浏览器换取token 2.下载sdk依赖： npm install baidu-aip-sdk 完整代码（非原创，参考了一个demo，但是很久以前写的找不到了）: btts(text) { console.log(text);　　 //以下参数参考api文档，token和人的声音音色
vue 语音合成
weixin_33724059的博客
12-18 1116
2019独角兽企业重金招聘Python工程师标准>>> ...
VUE 语音播报实现
fengqilove520的专栏
09-23 400
<template> <img alt="Vue logo" src="./assets/logo.png"> <button @click="handleSpeak('你长得真好看！')">说你真漂亮</button> </template> <script> const synth = window.speechSynthesis; const msg = new SpeechSynthesisUtterance(...
百度语音合成---前端vue项目
weixin_30793643的博客
03-01 567
☞：官方文档 ☞：网页示例 具体步骤： 　　1.通过 socket.io 接收后端传过来的数据。 　　2.判断是否在播放声音。 如果没有则直接获取百度 token 播放声音 　　3.如果有，则存入数组。声音播放结束后，播放数组中的数据并且移除将要播放的数据 项目代码（注意，代码有删减仅供参考）： <template> <d...
微软语音合成工具，使用 Electron + Vue + ElementPlus + Vite 构建，将文字转为语音MP3
08-11
标题中的“微软语音合成工具”是指利用微软提供的语音合成技术，将输入的文字转换为自然流畅的语音输出。这种工具在很多场景下都有应用，比如无障碍阅读、智能助手、在线教育等。它通常基于人工智能（AI）和深度学习...
讯飞离线语音合成（语音+）_uniapptts,vue讯飞语音app
06-05
总的来说，讯飞离线语音合成与uniapptts的结合，为Vue开发者提供了一种高效、便捷的语音服务方案，使开发者能够快速构建具有高质量语音合成功能的应用，无论是在移动设备还是桌面环境下，都能提供出色的用户体验。...
网页js+http+调用百度语音接口
01-16
直接下载就能使用，无需更改。在网页上使用js，使用http方式调用百度语音接口，识别音频文件的文字内容。（使用百度的语音识别，百度语音识别，需要提供音频文件，格式为pcm、wav 、avr）
WebSocket加入心跳包防止自动断开连接
weixin_30535043的博客
08-07 250
var userId=$("#userId").val(); var lockReconnect = false; //避免ws重复连接 var ws = null; // 判断当前浏览器是否支持WebSocket var wsUrl = serverConfig.cyberhouse_ws+userId; createWebSocket(wsUrl); ...
vue 移动端---语音播放--原生audio（类似百度翻译的语音播放）
DcTbnk的博客
06-08 872
原生audio---语音播放*可下载进行测试的音频网站1.效果图2.一些audio相关的代码知识上图效果代码展示--vue项目 *可下载进行测试的音频网站 →点击可查看—可下载的音频网站 1.效果图 上图效果的代码请查看博文→点击可查看（写成了父子组件形式） 我目前写的主要展示的是单个语音的播放，如下图所示，我参考的文章地址是 → 点击可查看 多个语音的播放顺序问题，可查看文章→点击可查看 2.一些audio相关的代码知识 // 重新加载 this.audio.load(); // 判断是否正在播放
vue实现百度语音播报API调用
m0_46559477的博客
08-05 1361
vue实现百度语音播报API调用 //百度语音播报 Vue.prototype.$speckText = function(str) { var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=6&text=" + encodeURI(str); new Audio(url).play(); },
vue 简单的播报语音功能
qq_43730595的博客
06-29 478
'播放语音测试，abcdefghijklmnopq'vue 简单的播报语音功能（下方代码可直接使用）// 文字内容: 小朋友，你是否有很多问号。'该浏览器不支持语音合成'// 传入需要播放的文字。// 使用的语言:中文。// 语音播报的函数。
Vue项目接入百度语音播报
weixin_45308258的博客
01-21 1311
这里是获取百度语音token的方法 可以让公司后台处理一下百度平台提供的接口获取accessToken async getToken () { const res = await this.axios.c_baiduApi(); console.log(res); if (res.code !== 200) return this.$message.erro...
百度云实现语音识别及语音合成
weixin_38241876的博客
12-11 4232
  第一步，点击人工智能，语音合成，然后立即使用： 然后再应用列表里面创建应用： 查看技术文档，下面附上我的语音合成及识别的代码： from aip import AipSpeech """ 你的 APPID AK SK """ APP_ID = '15079673' API_KEY = 'mGxvq3Nwr3aVjD4UFIFGsaMD' SECRET_KEY = 'YIN3wx...
vue+webscoket如何实现语音通话
09-25
### 回答1： Vue WebSocket 可以使用 WebRTC 技术来实现语音通话功能。具体实现步骤包括：1、使用 Vue 提供的 WebSocket 进行数据通信；2、使用 WebRTC 技术建立 P2P 连接；3、使用 WebRTC 实现语音编码解码、流媒体传输和处理等功能。需要注意的是，语音通话功能可能涉及到音频数据的处理和传输，需要具备一定的技术基础和相关知识。 ### 回答2： 实现Vue Websocket语音通话功能需要以下几个步骤： 1. 服务器端准备：为了实现语音通话功能，需要用到一种支持实时语音传输的技术，如WebRTC。首先，在服务器端搭建一个WebRTC服务器，并提供相应的API接口供客户端调用。 2. 客户端准备：使用Vue框架搭建前端页面。在Vue组件中引入WebRTC相关的JavaScript库，如webrtc-adapter和vue-webrtc等。这些库将提供语音通话所需的API和功能。 3. 创建连接：在Vue组件中，使用WebSocket建立与服务器的连接。可以使用Vue框架提供的插件vue-native-websocket来简化这一过程。 4. 启动语音通话：当WebSocket连接建立成功后，通过调用WebRTC库提供的API，启动语音通话功能。可以使用getUserMedia函数来获取用户的音频流，并通过WebRTC库提供的PeerConnection对象建立与对方的连接。 5. 实时通话：一旦与对方建立连接，即可实时进行语音通话。通过WebRTC库提供的API，使用RTCDataChannel实时传输音频数据。 6. 结束通话：当通话结束后，断开WebSocket连接和PeerConnection连接，释放资源。 在实现这个过程中，还要注意以下几点： - 需要处理一些错误和异常情况，如网络断开、音频流无法获取等。 - 可以使用Vue的状态管理机制，如Vuex，来管理语音通话过程中的状态和数据。 - 需要进行一定的音频编解码处理，以保证语音的质量和实时性。 总之，通过Vue框架结合WebRTC技术，我们可以实现基于Websocket的语音通话功能，为用户提供良好的通话体验。 ### 回答3： Vue.js是一个非常流行的JavaScript框架，提供了轻量级的前端开发解决方案。虽然Vue.js本身并不直接支持语音通话，但结合WebSocket协议可以实现这个功能。 首先，需要在Vue.js项目中安装WebSocket库。可以选择一些流行的WebSocket库，例如"socket.io"或"Vue-Socket.io"。使用npm安装： ``` npm install socket.io-client ``` 然后，在Vue.js组件中导入WebSocket库并连接到服务器： ```javascript import io from 'socket.io-client'; export default { data() { return { socket: null, }; }, mounted() { this.socket = io('http://your_server_address'); // 在合适的时机监听WebSocket连接成功的事件 this.socket.on('connect', () => { console.log("WebSocket连接成功"); // 可以在这里触发语音通话的初始化逻辑 }); }, methods: { startVoiceCall() { // 开始语音通话的逻辑 }, endVoiceCall() { // 结束语音通话的逻辑 }, // 其他语音通话相关的逻辑 }, destroyed() { this.socket.disconnect(); // 在组件销毁时断开WebSocket连接 }, }; ``` 在WebSocket连接成功后，可以通过WebSocket发送和接收语音数据。语音通话的具体实现和逻辑取决于服务器端的架构和技术选择。 在开始语音通话的方法中，可以触发语音通话的初始化逻辑。这包括向服务器发送语音通话请求，获取服务器返回的语音通话相关信息，并启动语音采集和播放设备。 在结束语音通话的方法中，可以触发语音通话的结束逻辑。这包括向服务器发送结束语音通话的请求，并停止语音采集和播放设备。 总之，要在Vue.js中实现语音通话功能，需要通过WebSocket连接服务器并发送和接收语音数据。具体的实现和逻辑可以根据项目的需求和服务器架构进行调整和扩展。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值