探索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 客户端。这种方法可以用于创建实时语音交互应用,如聊天机器人、语音助手等。

相关推荐
zhousenshan28 分钟前
Python爬虫常用框架
开发语言·爬虫·python
IMER SIMPLE1 小时前
人工智能-python-深度学习-经典神经网络AlexNet
人工智能·python·深度学习
CodeCraft Studio1 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
专注API从业者2 小时前
Python/Java 代码示例:手把手教程调用 1688 API 获取商品详情实时数据
java·linux·数据库·python
java1234_小锋2 小时前
[免费]基于Python的协同过滤电影推荐系统(Django+Vue+sqlite+爬虫)【论文+源码+SQL脚本】
python·django·电影推荐系统·协同过滤
看海天一色听风起雨落2 小时前
Python学习之装饰器
开发语言·python·学习
XiaoMu_0013 小时前
基于Python+Streamlit的旅游数据分析与预测系统:从数据可视化到机器学习预测的完整实现
python·信息可视化·旅游
THMAIL3 小时前
深度学习从入门到精通 - 生成对抗网络(GAN)实战:创造逼真图像的魔法艺术
人工智能·python·深度学习·神经网络·机器学习·生成对抗网络·cnn
我没想到原来他们都是一堆坏人4 小时前
(未完待续...)如何编写一个用于构建python web项目镜像的dockerfile文件
java·前端·python
总有刁民想爱朕ha5 小时前
车牌模拟生成器:Python3.8+Opencv代码实现与商业应用前景(C#、python 开发包SDK)
开发语言·python·数据挖掘