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

相关推荐
花好月圆春祺夏安33 分钟前
基于odoo17的设计模式详解---装饰模式
数据库·python·设计模式
萧鼎2 小时前
深度探索 Py2neo:用 Python 玩转图数据库 Neo4j
数据库·python·neo4j
华子w9089258592 小时前
基于 Python Django 和 Spark 的电力能耗数据分析系统设计与实现7000字论文实现
python·spark·django
Rockson3 小时前
使用Ruby接入实时行情API教程
javascript·python
Tipriest_4 小时前
Python关键字梳理
python·关键字·keyword
im_AMBER5 小时前
学习日志05 python
python·学习
大虫小呓5 小时前
Python 处理 Excel 数据 pandas 和 openpyxl 哪家强?
python·pandas
哪 吒5 小时前
2025B卷 - 华为OD机试七日集训第5期 - 按算法分类,由易到难,循序渐进,玩转OD(Python/JS/C/C++)
python·算法·华为od·华为od机试·2025b卷
摸爬滚打李上进6 小时前
重生学AI第十六集:线性层nn.Linear
人工智能·pytorch·python·神经网络·机器学习
凛铄linshuo8 小时前
爬虫简单实操2——以贴吧为例爬取“某吧”前10页的网页代码
爬虫·python·学习