当前位置：首页 > news >正文

Fish-Speech-1.5与Vue.js前端集成：实时语音预览功能实现

news 2026/3/27 7:39:17

Fish-Speech-1.5与Vue.js前端集成：实时语音预览功能实现

1. 引言

想象一下，你正在开发一个需要语音合成功能的前端应用。用户输入文字，希望能立即听到对应的语音效果，而不是等待整个音频文件生成完成。这种实时语音预览体验，正是现代Web应用追求的用户体验之一。

Fish-Speech-1.5作为当前领先的文本转语音模型，支持13种语言，基于超过100万小时的音频数据训练而成。而Vue.js作为流行的前端框架，如何将这两者结合，实现流畅的实时语音预览功能呢？

本文将带你一步步实现这个功能，从WebSocket连接到音频流处理，再到用户体验优化，让你能够快速在自己的Vue项目中集成高质量的实时语音合成能力。

2. 环境准备与项目设置

2.1 创建Vue项目

如果你还没有Vue项目，可以使用Vite快速创建一个：

npm create vite@latest my-voice-app -- --template vue cd my-voice-app npm install

2.2 安装必要依赖

我们需要安装处理音频和WebSocket的相关依赖：

npm install axios socket.io-client

2.3 Fish-Speech-1.5 API准备

确保你有一个可用的Fish-Speech-1.5 API端点。通常这会是一个WebSocket服务，支持实时音频流传输。本文假设你已经有了这样的服务端点。

3. 核心实现步骤

3.1 WebSocket连接管理

首先，我们需要创建一个WebSocket服务来管理与Fish-Speech-1.5后端的连接：

// src/services/speechService.js import { io } from 'socket.io-client'; class SpeechService { constructor() { this.socket = null; this.isConnected = false; this.audioContext = null; this.audioQueue = []; this.isPlaying = false; } connect(apiEndpoint) { return new Promise((resolve, reject) => { this.socket = io(apiEndpoint); this.socket.on('connect', () => { this.isConnected = true; console.log('Connected to speech server'); resolve(); }); this.socket.on('disconnect', () => { this.isConnected = false; console.log('Disconnected from speech server'); }); this.socket.on('audio_chunk', (data) => { this.handleAudioChunk(data); }); this.socket.on('error', (error) => { console.error('Speech server error:', error); reject(error); }); this.socket.on('synthesis_complete', () => { console.log('Synthesis completed'); }); }); } disconnect() { if (this.socket) { this.socket.disconnect(); this.socket = null; this.isConnected = false; } } }

3.2 音频流处理与播放

处理接收到的音频数据并实现流畅播放：

// 继续在SpeechService类中添加方法 handleAudioChunk(audioData) { // 将base64音频数据转换为ArrayBuffer const audioArrayBuffer = this.base64ToArrayBuffer(audioData); // 添加到音频队列 this.audioQueue.push(audioArrayBuffer); // 如果没有正在播放，开始播放 if (!this.isPlaying) { this.playAudioQueue(); } } async playAudioQueue() { if (this.audioQueue.length === 0 || this.isPlaying) { return; } this.isPlaying = true; // 初始化AudioContext（只在需要时） if (!this.audioContext) { this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); } while (this.audioQueue.length > 0) { const audioArrayBuffer = this.audioQueue.shift(); try { // 解码音频数据 const audioBuffer = await this.audioContext.decodeAudioData(audioArrayBuffer); // 创建音频源 const source = this.audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(this.audioContext.destination); // 播放 source.start(); // 等待当前音频片段播放完成 await new Promise(resolve => { source.onended = resolve; }); } catch (error) { console.error('Error playing audio chunk:', error); } } this.isPlaying = false; } base64ToArrayBuffer(base64) { const binaryString = atob(base64); const bytes = new Uint8Array(binaryString.length); for (let i = 0; i < binaryString.length; i++) { bytes[i] = binaryString.charCodeAt(i); } return bytes.buffer; } async synthesizeSpeech(text, options = {}) { if (!this.isConnected) { throw new Error('Not connected to speech server'); } // 清空之前的音频队列 this.audioQueue = []; // 发送合成请求 this.socket.emit('synthesize', { text: text, language: options.language || 'zh', speed: options.speed || 1.0, emotion: options.emotion || 'neutral' }); }

3.3 Vue组件集成

创建一个Vue组件来使用语音服务：

<template> <div class="voice-preview"> <div class="input-section"> <textarea v-model="inputText" placeholder="请输入要转换为语音的文字" rows="4" @keydown.enter.prevent="synthesizeSpeech" ></textarea> <div class="controls"> <select v-model="selectedLanguage"> <option value="zh">中文</option> <option value="en">English</option> <option value="ja">日本語</option> <!-- 其他支持的语言 --> </select> <select v-model="selectedEmotion" v-if="selectedLanguage === 'zh'"> <option value="neutral">中性</option> <option value="happy">高兴</option> <option value="sad">悲伤</option> <option value="angry">生气</option> </select> <button @click="synthesizeSpeech" :disabled="isSynthesizing || !inputText.trim()" > {{ isSynthesizing ? '合成中...' : '生成语音' }} </button> <button @click="stopPlayback" :disabled="!isPlaying" > 停止播放 </button> </div> </div> <div class="status" v-if="statusMessage"> {{ statusMessage }} </div> </div> </template> <script> import { ref, onMounted, onUnmounted } from 'vue'; import SpeechService from '@/services/speechService'; export default { name: 'VoicePreview', setup() { const inputText = ref(''); const selectedLanguage = ref('zh'); const selectedEmotion = ref('neutral'); const isSynthesizing = ref(false); const isPlaying = ref(false); const statusMessage = ref(''); const speechService = new SpeechService(); onMounted(async () => { try { statusMessage.value = '正在连接语音服务...'; await speechService.connect('wss://your-speech-api-endpoint'); statusMessage.value = '连接成功'; // 3秒后清除状态消息 setTimeout(() => { statusMessage.value = ''; }, 3000); } catch (error) { statusMessage.value = '连接失败: ' + error.message; } }); onUnmounted(() => { speechService.disconnect(); }); const synthesizeSpeech = async () => { if (!inputText.value.trim()) return; isSynthesizing.value = true; statusMessage.value = '语音合成中...'; try { await speechService.synthesizeSpeech(inputText.value, { language: selectedLanguage.value, emotion: selectedEmotion.value }); statusMessage.value = '准备播放'; setTimeout(() => { statusMessage.value = ''; }, 2000); } catch (error) { statusMessage.value = '合成失败: ' + error.message; } finally { isSynthesizing.value = false; } }; const stopPlayback = () => { // 实现停止播放的逻辑 speechService.stopPlayback(); isPlaying.value = false; }; return { inputText, selectedLanguage, selectedEmotion, isSynthesizing, isPlaying, statusMessage, synthesizeSpeech, stopPlayback }; } }; </script> <style scoped> .voice-preview { max-width: 600px; margin: 0 auto; padding: 20px; } .input-section textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; margin-bottom: 15px; resize: vertical; } .controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .controls select, .controls button { padding: 8px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; } .controls button { background-color: #4CAF50; color: white; border: none; cursor: pointer; } .controls button:disabled { background-color: #ccc; cursor: not-allowed; } .status { margin-top: 15px; padding: 10px; background-color: #f5f5f5; border-radius: 6px; text-align: center; } </style>

4. 用户体验优化实践

4.1 实时反馈与状态管理

为了提供更好的用户体验，我们需要实时反馈当前状态：

// 在SpeechService中添加状态管理 constructor() { // ...其他初始化 this.listeners = { onStart: [], onProgress: [], onComplete: [], onError: [] }; } on(event, callback) { if (this.listeners[event]) { this.listeners[event].push(callback); } } emit(event, data) { if (this.listeners[event]) { this.listeners[event].forEach(callback => callback(data)); } } // 修改synthesizeSpeech方法 async synthesizeSpeech(text, options = {}) { if (!this.isConnected) { throw new Error('Not connected to speech server'); } this.audioQueue = []; this.emit('onStart'); // 发送合成请求 this.socket.emit('synthesize', { text: text, language: options.language || 'zh', speed: options.speed || 1.0, emotion: options.emotion || 'neutral' }); }

4.2 音频缓冲与流畅播放优化

为了避免音频播放中断，实现更流畅的体验：

// 增强的音频播放逻辑 async playAudioQueue() { if (this.audioQueue.length === 0 || this.isPlaying) { return; } this.isPlaying = true; this.emit('onProgress', { progress: 'playing' }); if (!this.audioContext) { this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); } // 确保有足够的缓冲后再开始播放 const minBufferChunks = 3; while (this.audioQueue.length > 0) { // 等待有足够的缓冲 if (this.audioQueue.length < minBufferChunks) { await new Promise(resolve => setTimeout(resolve, 100)); continue; } const audioArrayBuffer = this.audioQueue.shift(); try { const audioBuffer = await this.audioContext.decodeAudioData(audioArrayBuffer); const source = this.audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(this.audioContext.destination); source.start(); await new Promise(resolve => { source.onended = resolve; }); } catch (error) { console.error('Error playing audio chunk:', error); } } this.isPlaying = false; this.emit('onComplete'); }

4.3 错误处理与重连机制

增强系统的健壮性：

// 增强的连接管理 connect(apiEndpoint, maxRetries = 3) { return new Promise((resolve, reject) => { let retries = 0; const tryConnect = () => { this.socket = io(apiEndpoint, { reconnectionAttempts: maxRetries, timeout: 5000 }); this.socket.on('connect', () => { this.isConnected = true; retries = 0; console.log('Connected to speech server'); resolve(); }); this.socket.on('connect_error', (error) => { retries++; console.error(`Connection attempt ${retries} failed:`, error); if (retries >= maxRetries) { reject(new Error(`Failed to connect after ${maxRetries} attempts`)); } }); // 其他事件监听... }; tryConnect(); }); }