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