探索Edge-TTS与WebSocket集成:打造实时语音交互系统

本文为实现 WebSocket 将文本转换为语音并返回 Base64 数据给 Vue 客户端【干货】
在本文中,我们将构建一个简单的系统,该系统能够接收文本输入,通过 Microsoft Edge 的文本到语音服务(Edge TTS)转换为语音,并将生成的语音数据以 Base64 编码的形式通过 WebSocket 传输给 Vue 客户端。


后端: Python 3.10

WebSocket: Python 的 websockets 库
文本到语音: edge_tts 库


前端: Vue.js


步骤 1: 设置 Python 环境
首先,确保你的环境中安装了 Python 3.10。然后,安装所需的库:

pip install edge-tts websockets


步骤 2: 创建 WebSocket 服务器
我们将创建一个简单的 WebSocket 服务器,它将接收文本消息,使用 Edge TTS 转换为语音,并将结果以 Base64 编码的形式发送回客户端。

# server.py
async def tts_task(text, voice="zh-CN-YunxiNeural"):base64_data = ""memory_file = io.BytesIO()try:communicate = edge_tts.Communicate(text, voice)async for chunk in communicate.stream():if chunk["type"] == "audio":memory_file.write(chunk["data"])memory_file.seek(0)read_data = memory_file.read()base64_data = base64.b64encode(read_data).decode("utf-8")finally:memory_file.close()return base64_data

在上面的代码块中,将最后的音频流结果转换成了base64数据。


步骤 3: 创建 Vue 客户端
接下来,我们将创建一个简单的 Vue 客户端来与 WebSocket 服务器交互。

在vue端调用websocketjs,下面只是组件部分代码
<template>
  <div>
    <input v-model="message" placeholder="Type something..." />
    <button @click="sendText">Send</button>
    <audio ref="audioPlayer" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      websocket: null,
    };
  },
  methods: {
    sendText() {
      this.websocket.send(this.message);
    },
    playAudio(base64Data) {
      const audioBlob = this.base64ToBlob(base64Data, 'audio/mpeg');
      const audioUrl = URL.createObjectURL(audioBlob);
      this.$refs.audioPlayer.src = audioUrl;
      this.$refs.audioPlayer.play();
    },
    base64ToBlob(base64Data, mimeType) {
      const byteCharacters = atob(base64Data);
      const byteNumbers = new Array(byteCharacters.length);
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      return new Blob([byteArray], { type: mimeType });
    }
  },
  mounted() {
    this.websocket = new WebSocket('ws://localhost:8765');
    this.websocket.onmessage = (event) => {
      // 接收到的数据是Base64编码的音频数据
      this.playAudio(event.data);
    };
  },
  beforeDestroy() {
    this.websocket.close();
  }
};
</script>


步骤 4: 运行系统
运行 Python WebSocket 服务器:
python server.py
启动 Vue 项目(确保你已经安装了 Vue CLI 并创建了项目):
npm run serve
在浏览器中打开 Vue 应用,输入文本,点击发送,你将听到通过 WebSocket 传输的语音。

总结
本文展示了如何使用 Python 3.10 和 WebSocket 实现一个文本到语音的转换服务,并通过 Base64 编码将语音数据传输给 Vue 客户端。这种方法可以用于创建实时语音交互应用,如聊天机器人、语音助手等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/52817.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【第十三届蓝桥杯单片机国赛满分代码】

其他相关文章&#xff1a; 【提分必看&#xff01;】蓝桥杯单片机提分技巧&#xff08;国一经验分享&#xff09; 【国一超全代码分享&#xff01;】蓝桥杯单片机各模块代码整合 【蓝桥杯单片机客观题知识点汇总】 本代码经过编译后生成的hex文件经过了4T测试平台的满分测试。读…

python从入门到精通:文件操作

目录 1、文件编码 2、文件的读取 open( )打开函数 3、文件的写入 4、文件的追加 5、文件的操作&#xff08;综合案例&#xff09; 1、文件编码 因为计算机只能识别0和1&#xff0c;所以我们是通过编码技术&#xff08;密码本&#xff09;将内容翻译成0和1存入&#xff0…

Clock skew

时钟偏差(有时称为时序偏差)是同步数字电路系统(如计算机系统)中的一种现象,其中由于门电路或更先进的半导体技术中导线信号传播延迟,源自同一源的时钟信号会在不同时间到达不同组件。任何两个时钟读数之间的瞬时差异被称为它们的偏差。 大多数数字电路的操作由一个周期…

C#——扩展方法

扩展方法 定义 扩展方法&#xff08;Extension Methods&#xff09;是C#中一种特殊的静态方法&#xff0c;它定义在一个静态类中&#xff0c;但是可以像实例方法一样被调用&#xff0c;使得代码更加简洁、易读。 设计目的 是为了给已有的类型添加新的行为&#xff0c;而不需要…

数学建模学习(124):使用Python实现模糊ARAS方法从原理到实战

文章目录 1. 引言2. 模糊ARAS方法原理2.1 模糊数的表示3. 案例分析:设备采购决策3.1 数据来源3.2 权重设定3.3 数据集3.4 Python实现模糊ARAS方法3.5 结果分析3.6 模糊ARAS的优势3.7 应用场景4. 总结参考文献1. 引言 在复杂的决策场景中,决策者往往面对的不仅仅是多个选择(…

Android APK打包脚本

build.gradle版本 同目录创建config.gradle文件写入需要的信息入 config.gradle文件内容 ext { /*** 自定义APP运行环境* dev: 开发* test: 测试* pro: 生产*/ env "pro" /*** 动态参数配置&#xff0c;根据自己需要添加参数* APP_ID: 包名* VERSION_CODE: 版本号…

【C++】奇异递归模板模式CRTP——静态多态

奇异递归模板模式&#xff08;Curiously Recurring Template Pattern&#xff0c;CRTP&#xff09;是C模板编程时的一种惯用法&#xff08;idiom&#xff09;&#xff1a;把派生类作为基类的模板参数。更一般地被称作F-bound polymorphism。CRTP在C中主要有两种用途&#xff1a…

在高质量视频生成文本、图像生成文本的GLM-4V-Plus技术加持下医疗未来的方向

人工智能的进步为医疗领域带来了巨大的变革&#xff0c;尤其是视频生成文字、图片生成文字和医学统计数据生成文字等技术的应用。这些技术使得我们能够更全面地利用大数据来辅助诊断&#xff0c;为患者提供更加精确和个性化的医疗服务。以下是一些可能的应用场景和优势&#xf…

国产网卡品牌崛起,做好网络信息安全的“守门人”

在信息技术日新月异的时代背景下&#xff0c;信息安全不仅关乎个人隐私保护&#xff0c;更是国家安全与经济发展的基石。LR-LINK联瑞凭借其前瞻性的视野和深厚的研发实力&#xff0c;成功自主研发出全国产化的FPGA&#xff08;现场可编程门阵列&#xff09;网闸隔离卡方案&…

优质企业上网行为管理软件大盘点

员工在上班时间摸鱼&#xff0c;看似是一个小问题&#xff0c;但却会给企业带来诸多不良影响。首先&#xff0c;摸鱼会降低员工的工作效率&#xff0c;导致工作任务无法按时完成&#xff0c;影响项目进度。其次&#xff0c;摸鱼行为会破坏企业的工作氛围&#xff0c;影响其他员…

零基础学习Python(七)

1. 字符串常用方法 lower()、upper()&#xff1a;转换为小写字符串、大写字符串 split(str)&#xff1a;按照指定字符串str进行分割&#xff0c;结果为列表&#xff1a; email "123qq.com" print(email.split("")) [123, qq.com] count(str)&#xf…

Linux 安装Mysql保姆级教程

一、检查环境 我们登录服务器&#xff0c;查看之前是否安装过mysql rpm -qa | grep mysql 由于我之前安装过&#xff0c;所以这里是有数据的 如果需要删除重新下载&#xff0c;可以使用 rpm -e mysql57-community-release-el7-10.noarch.rpm 二、安装 1、下载 接下来下载安装…

Hive SQL

一、基本数据类型 tinyint 1byte 有符号整数 smallint 2byte 有符号整数 int 4byte 有符号整数 bigint 8byte 有符号整数 boolean 布尔类型&#xff0c;true或者false float 单精度浮点数 double 双精度浮点数 decim…

电脑C盘临时文件怎么清理?

在解决“C盘临时文件怎么清理&#xff1f;”的问题前&#xff0c;先来一起了解一下清理C盘临时文件的原因&#xff1a; 释放磁盘空间&#xff1a;临时文件可以占用大量磁盘空间&#xff0c;尤其是在长时间未清理的情况下&#xff0c;清理这些文件可以释放空间。提高系统性能&a…

gaussian grouping训练自定义数据集

gaussian grouping是一个语义分割3DGS的方法。 它在每个3DGS点云中加入一个叫Identity Encoding的特征向量&#xff0c; 在渲染时把特征向量渲染到2D图像&#xff0c;每个像素位置为一个特征向量&#xff0c;使用额外的线性分类层对每个2D位置的特征向量分类。得到mask。 这个m…

Python——模块和包

模块 Python的模块&#xff08;Modules&#xff09;是Python程序的重要组成部分&#xff0c;它们允许你将代码分解成可重用的单元。每个模块都是一个包含Python代码的文件&#xff0c;文件名就是模块名加上.py后缀。模块可以定义函数、类和变量&#xff0c;也可以包含可执行的…

sheng的学习笔记-AI-半监督聚类

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 半监督学习&#xff1a;sheng的学习笔记-AI-半监督学习-CSDN博客 聚类&#xff1a;sheng的学习笔记-AI-聚类(Clustering)-CSDN博客 均值算法&#xff1a;sheng的学习笔记-AI-K均值算法_k均值算法怎么算迭代两次后的最大…

突发!Runway 从 HuggingFace 及 GitHub 上删库跑路,背后有何隐情?

突发&#xff01;2024年8月29日Runway 从 HuggingFace 及 GitHub 上删库跑路&#xff0c;背后有何隐情&#xff1f; &#x1f9d0; 今天我们来聊一聊科技圈一则爆炸性消息&#xff1a;Runway ML 从 HuggingFace 和 GitHub 上删库跑路&#xff0c;毫无预警&#xff01;这个举动…

Java大文件上传方案(vue+饿了么):秒传、断点续传、分片上传!

前言 本篇文章是基于其他文章的基础上结合自己的理解写出来的,如果哪里有问题请指出! 详细教程 秒传 1、什么是秒传 通俗的说&#xff0c;你把要上传的东西上传&#xff0c;服务器会先做MD5校验&#xff0c;如果服务器上有它就会进入秒传&#xff0c;想要不秒传&#xff0…

properties文件提示未引用

问题描述 以前用的好好的项目,今天突然打开就发现idea不识别spring配置信息显示未引用,如果config代码中引入的配置却可以高亮显示,然后输入spring相关的配置,文件是没有提示的。经过研究发现是spring相关的插件被关闭了。效果如下 解决方法 启用三个插件spring Boot,Sp…