从零搭建语音克隆 Demo：API 到上线全流程

为什么部署比模型本身更难？

玩过语音 AI 库的人都知道，模型调通只是第一步，真正让用户能交互体验才是关键。一个语音克隆 Demo 的价值，不在于你本地跑出了多好的效果，而在于能否让别人在浏览器里点一下按钮就听到结果。

本文以 ElevenLabs 作为语音合成引擎，用 Express 搭建后端代理，配合一个极简前端页面，最终部署到 Bluehost 的 Node.js 托管环境。整个流程从写代码到上线，熟练的话几个小时就能完成。

后端：一个极简的 API 代理

ElevenLabs 提供 REST 接口，将文本转为高保真语音，按量计费，适合快速实验。后端的核心任务就是：接收前端传来的文本，转发给 ElevenLabs，把返回的音频流回传给浏览器。

项目初始化

npm init -y
npm install express dotenv axios cors

服务端代码（server.js）

require('dotenv').config();
const express = require('express');
const axios = require('axios');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 3000;

app.use(cors());
app.use(express.json());

app.post('/synthesize', async (req, res) => {
  const { text, voice_id } = req.body;
  if (!text) return res.status(400).send('Text is required');
  try {
    const response = await axios({
      method: 'post',
      url: 'https://api.elevenlabs.io/v1/text-to-speech/' + voice_id,
      headers: {
        'xi-api-key': process.env.ELEVENLABS_API_KEY,
        'Content-Type': 'application/json'
      },
      data: { text },
      responseType: 'arraybuffer'
    });
    res.set('Content-Type', 'audio/mpeg');
    res.send(response.data);
  } catch (err) {
    console.error(err);
    res.status(500).send('Error generating audio');
  }
});

app.listen(PORT, () => console.log(`Server running on ${PORT}`));

关键点说明：

• 环境变量管理：API Key 存放在 .env 文件中，绝不提交到 Git 仓库。
• CORS 中间件：允许前端跨域请求，开发阶段必不可少。
• 二进制响应：responseType: 'arraybuffer' 确保音频数据以二进制形式透传，避免编码问题。

前端：单页面零构建

Demo 不需要 React 或 Vue，一个 index.html 就够了。页面包含一个文本输入框、一个播放按钮和一个音频播放器，通过 fetch 调用后端的 /synthesize 接口。

<!DOCTYPE html>
<html>
<head>
  <title>Voice Cloner Demo</title>
</head>
<body>
  <h1>Voice Cloner Demo</h1>
  <textarea id="text" placeholder="输入要转换的文本"></textarea>
  <button onclick="speak()">Speak</button>
  <audio id="player" controls></audio>
  <script>
    async function speak() {
      const text = document.getElementById('text').value;
      const res = await fetch('https://YOUR_HOST/synthesize', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        data: JSON.stringify({ text, voice_id: 'YOUR_VOICE_ID' })
      });
      const blob = await res.blob();
      document.getElementById('player').src = URL.createObjectURL(blob);
      document.getElementById('player').play();
    }
  </script>
</body>
</html>

将 YOUR_HOST 替换为你的部署域名，YOUR_VOICE_ID 替换为 ElevenLabs 中的语音 ID。这种零构建方案的优势是：部署简单、加载快、没有前端打包的复杂度。

部署到 Bluehost

Bluehost 的共享主机支持 Node.js，价格低廉且配置向导对新手友好。以下是部署步骤：

1. 注册与域名

选择包含 Node.js 支持的套餐（通常 Plus 或更高），在结账时绑定域名或配置 DNS 解析。

2. SSH 连接服务器

在 cPanel 中启用 SSH，获取凭证后连接：

ssh user@yourdomain.com

3. 上传代码

cd /home/yourusername/public_html
git clone <你的仓库地址>
npm install

4. 配置环境变量

在 cPanel → "Setup Node.js App" → "Environment Variables" 中添加 ELEVENLABS_API_KEY。

5. 启动应用

在 Node.js 应用管理界面点击 Start，服务会绑定到 server.js 中指定的端口（默认 3000），Bluehost 会自动将其映射到你的域名。

6. 放置前端文件

将 index.html 放入 public_html 目录，访问 https://yourdomain.com 即可看到 Demo 页面，/synthesize 接口也自动可达。

实用建议

• 安全：生产环境建议为 API Key 设置请求频率限制，防止被恶意刷接口导致费用飙升。
• 扩展性：如果用户量增长，可考虑将后端迁移到 Vercel 或 Render 等 Serverless 平台，按请求计费更划算。
• 调试技巧：本地开发时先用 http://localhost:3000 测试后端，确认无误后再部署到线上。

这套方案的核心价值在于：用最小的技术栈实现从原型到上线的闭环。对于想快速验证语音 AI 想法的开发者，这是成本最低、路径最短的实践方式。