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

相关推荐
好看资源平台28 分钟前
网络爬虫——综合实战项目:多平台房源信息采集与分析系统
爬虫·python
进击的六角龙1 小时前
深入浅出:使用Python调用API实现智能天气预报
开发语言·python
檀越剑指大厂1 小时前
【Python系列】浅析 Python 中的字典更新与应用场景
开发语言·python
湫ccc1 小时前
Python简介以及解释器安装(保姆级教学)
开发语言·python
孤独且没人爱的纸鹤1 小时前
【深度学习】:从人工神经网络的基础原理到循环神经网络的先进技术,跨越智能算法的关键发展阶段及其未来趋势,探索技术进步与应用挑战
人工智能·python·深度学习·机器学习·ai
羊小猪~~1 小时前
tensorflow案例7--数据增强与测试集, 训练集, 验证集的构建
人工智能·python·深度学习·机器学习·cnn·tensorflow·neo4j
lzhlizihang1 小时前
python如何使用spark操作hive
hive·python·spark
q0_0p1 小时前
牛客小白月赛105 (Python题解) A~E
python·牛客
极客代码1 小时前
【Python TensorFlow】进阶指南(续篇三)
开发语言·人工智能·python·深度学习·tensorflow
庞传奇1 小时前
TensorFlow 的基本概念和使用场景
人工智能·python·tensorflow