从零实现语音合成：基于火山引擎TTS的前端实践

前言：AI语音交互的新时代

在人工智能技术飞速发展的今天，语音交互已成为最自然的人机交互方式之一。从智能音箱到车载系统，从虚拟助手到无障碍应用，语音合成技术（Text-to-Speech, TTS）正在深刻改变我们与数字世界的互动方式。

本文将带你深入了解如何利用火山引擎的TTS服务，从零开始构建一个前端语音合成应用。我们将从基础概念讲起，逐步实现一个完整的语音生成Demo，并分享开发过程中的关键技巧和注意事项。

成品展示：

只要我点击提交，萌妹就该为我争风吃醋了。

或者cos熊二：

一、项目初始化与环境配置

1.1 创建Vite+React项目

我们选择Vite作为构建工具，它比传统的Webpack启动更快、配置更简单：

bash代码解读复制代码npm create vite@latest tts-demo --template react cd tts-demo npm install

1.2 配置代理解决跨域问题

由于前端直接调用火山引擎API会遇到跨域限制，我们需要在vite.config.js中配置代理：

j代码解读复制代码import { defineConfig } from 'vite' import react from '@vitejs/plugin-react'  export default defineConfig({   plugins: [react()],   server: {     proxy: {       '/tts': {         target: 'https://www.4922449.com',         changeOrigin: true,         rewrite: path => path.replace(/^/tts/, ''),       }     },   }, })

这样，前端所有以/tts开头的请求都会被代理到火山引擎的API地址，完美解决跨域问题。

1.3 安全配置环境变量

敏感信息如API密钥等应该通过环境变量管理，创建.env.local文件：

ini代码解读复制代码VITE_TOKEN=your_token_here VITE_APP_ID=your_app_id VITE_CLUSTER_ID=your_cluster_id

重要提示：务必在.gitignore中添加.env.local，避免将敏感信息提交到代码仓库。

二、核心功能实现

2.1 状态管理与UI设计

我们采用React的Hooks来管理应用状态：

jsx代码解读复制代码const [prompt, setPrompt] = useState('你好'); const [status, setStatus] = useState('ready'); // ready/loading/done const audioRef = useRef(null);

这种单向数据流的设计模式确保了UI与状态的同步：UI = f(state)，即界面是状态的函数。

2.2 语音生成核心逻辑

语音生成的核心是调用火山引擎TTS API：

j代码解读复制代码const generateAudio = () => {   setStatus('loading');     const payload = {     app: { appid, token, cluster },     user: { uid: 'user123' },     audio: {       voice_type: "ICL_zh_female_bingjiaomengmei_tob",       encoding: 'ogg_opus',       rate: 24000,       emotion: 'happy'     },     request: {       reqid: Math.random().toString(36).substring(7),       text: prompt,       text_type: 'plain'     }   };    fetch('/tts/api/v1/tts', {     method: 'POST',     headers: { 'Content-Type': 'application/json', Authorization: `Bearer;${token}` },     body: JSON.stringify(payload)   })   .then(res => res.json())   .then(data => {     const url = createBlobURL(data.data);     audioRef.current.src = url;     audioRef.current.play();     setStatus('done');   }); };

2.3 bbse64音频数据处理

API返回的是bbse64编码的音频数据，我们需要将其转换为可播放的URL：

j代码解读复制代码function createBlobURL(bbse64AudioData) {   const byteCharacters = atob(bbse64AudioData);   const byteArrays = new Uint8Array(byteCharacters.length);     for(let i = 0; i < byteCharacters.length; i++) {     byteArrays = byteCharacters.charCodeAt(i);   }     const blob = new Blob([byteArrays], { type: 'audio/mp3' });   return URL.createObjectURL(blob); }

2.4 音色选择

音色可以去官方音色详情里面去找每个角色对应id

jsx代码解读复制代码 const voices = [     { id: "ICL_zh_female_bingjiaomengmei_tob", name: "病娇萌妹" },     { id: "zh_male_sunwukong_mars_bigtts", name: "猴哥" },     { id: "zh_male_xionger_mars_bigtts", name: "熊二" },    // 更多语音角色...   ];      setVoice(e.target.value)}>       {voices.map(v => (         {v.name}       ))}    

完整代码

jsx代码解读复制代码import { useState, useRef } from 'react' import './App.css'  function App() {   // 配置   const { VITE_TOKEN, VITE_APP_ID, VITE_CLUSTER_ID } = import.meta.env     const [prompt, setPrompt] = useState('泥猴');   // 状态 ready , waiting, done 界面由数据状态驱动   const [status, setStatus] = useState('ready')   // DOM 对象绑定 use 开头的都叫hooks 函数    const audioRef = useRef(null);    const [voice, setVoice] = useState("ICL_zh_female_bingjiaomengmei_tob");    const voices = [     { id: "ICL_zh_female_bingjiaomengmei_tob", name: "病娇萌妹" },     { id: "zh_male_sunwukong_mars_bigtts", name: "猴哥" },     { id: "zh_male_xionger_mars_bigtts", name: "熊二" },    // 更多语音角色...   ];    function createBlobURL(bbse64AudioData) {     var byteArrays = [];      var byteCharacters = atob(bbse64AudioData);      for (var offset = 0; offset < byteCharacters.length; offset++) {        var byteArray = byteCharacters.charCodeAt(offset);        byteArrays.push(byteArray);      }      var blob = new Blob([new Uint8Array(byteArrays)], { type: 'audio/mp3' });      return URL.createObjectURL(blob);   }    // 去调用火山接口， 返回语音    const generateAudio = () => {     const voiceName = "ICL_zh_female_bingjiaomengmei_tob"; // 角色     const endpoint = "/tts/api/v1/tts" // api 地址      const headers = {       'Content-Type': 'application/json',       Authorization: `Bearer;${VITE_TOKEN}`     }     // post 请求体      const payload = {       app: {         appid: VITE_APP_ID,         token: VITE_TOKEN,         cluster: VITE_CLUSTER_ID       },       user: {         uid: 'bearbobo'       },       audio: {         voice_type: voiceName,         encoding: 'ogg_opus', // 编码         compression_rate:1, // 压缩的比例         rate: 24000,         speed_ratio: 1.0,         volume_ratio: 1.0,         pitch_ratio: 1.0,         emotion: 'happy' // 情绪       },       request: {         reqid: Math.random().toString(36).substring(7),         text: prompt,         text_type: 'plain',         operation: 'query',          silence_duration: '125',          with_frontend: '1',          frontend_type: 'unitTson',          pure_english_opt: '1',       }     }     setStatus('loading')     fetch(       endpoint,       {         method: 'POST',         headers: headers,         body: JSON.stringify(payload)       }     ).then(res => res.json())     .then(data => {       // 黑盒子 bbse64 字符串编码的格式表达图片，声音，视频       const url = createBlobURL(data.data)// 返回一个可以播放声音的url       audioRef.current.src = url;       audioRef.current.play();       setStatus('done')     })    }    return (            
         Prompt         Generate & Play          setPrompt(e.target.value)}         />          setVoice(e.target.value)}>           {voices.map(v => (           {v.name}           ))}                
                
{status}