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

相关推荐
程序员爱钓鱼1 小时前
Python编程实战 · 基础入门篇 | Python的缩进与代码块
后端·python
pr_note2 小时前
python|if判断语法对比
python
apocelipes4 小时前
golang unique包和字符串内部化
java·python·性能优化·golang
Geoking.5 小时前
NumPy zeros() 函数详解
python·numpy
Full Stack Developme5 小时前
java.text 包详解
java·开发语言·python
丁浩6666 小时前
Python机器学习---2.算法:逻辑回归
python·算法·机器学习
B站_计算机毕业设计之家6 小时前
计算机毕业设计:Python农业数据可视化分析系统 气象数据 农业生产 粮食数据 播种数据 爬虫 Django框架 天气数据 降水量(源码+文档)✅
大数据·爬虫·python·机器学习·信息可视化·课程设计·农业
Q_Q5110082856 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
鄃鳕7 小时前
python迭代器解包【python】
开发语言·python
懷淰メ7 小时前
python3GUI--模仿百度网盘的本地文件管理器 By:PyQt5(详细分享)
开发语言·python·pyqt·文件管理·百度云·百度网盘·ui设计