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

相关推荐
神奇的代码在哪里几秒前
使用python开发任天堂gameboy模拟器|pyboy开发实践
python·宝可梦·pyboy·gameboy模拟器·任天堂掌机模拟器
坚持就完事了20 分钟前
正则表达式与Python的re模块
python·正则表达式
Alex艾力的IT数字空间21 分钟前
基于PyTorch和CuPy的GPU并行化遗传算法实现
数据结构·人工智能·pytorch·python·深度学习·算法·机器学习
keerduoba29 分钟前
EWCCTF2025 Tacticool Bin wp
python
a2006380121 小时前
ply(python版本的flex/bison or Lex/Yacc)
python
wokaoyan19811 小时前
逻辑推演题——谁是骗子
python
九年义务漏网鲨鱼1 小时前
利用AI大模型重构陈旧代码库 (Refactoring Legacy Codebase with AI)
python
滑水滑成滑头1 小时前
**标题:发散创新:智能交通系统的深度探究与实现**摘要:本文将详细
java·人工智能·python
闭着眼睛学算法2 小时前
【双机位A卷】华为OD笔试之【哈希表】双机位A-跳房子I【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·c++·python·算法·华为od·散列表
无限码力2 小时前
华为OD技术面真题 - Python开发 - 2
python·华为od·华为od技术面真题·华为od技术面八股·华为od技术面python八股·华为od面试python真题·华为odpython八股