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