DEV Community

VoiceDeveloper
VoiceDeveloper

Posted on

Deploy a Voice Cloning Demo App: From Code to Live Website

#webdev #ai #tutorial #beginners

Why Voice Cloning Is the Next Big Thing

If you’ve been following the AI wave, you’ve probably seen demos that turn a short audio sample into a full‑blown voice that can read any text you throw at it. That’s voice cloning, and it’s quickly moving from research labs to real‑world products—think personalized audiobooks, dynamic IVR systems, and immersive game characters.

The magic behind most of today’s high‑quality clones is ElevenLabs. Their API delivers natural‑sounding speech with just a few lines of code, and the pricing tiers make it feasible for hobby projects as well as production workloads. In this post I’ll walk you through building a tiny demo app that lets a user upload a voice sample, type any text, and hear the cloned voice instantly. Then I’ll show how to push the whole thing to a live website using Bluehost, the easy, affordable way to get your voice AI online.

TL;DR – Grab an ElevenLabs API key, spin up a Flask app, push it to a Bluehost shared‑hosting plan, and you’ll have a public voice‑cloning demo in under an hour.

1. Prerequisites

What you need Why
Python 3.9+ The demo uses Flask and the requests library.
ElevenLabs API key Enables the text‑to‑speech endpoint. Sign up at https://try.elevenlabs.io/kr07zfuqn1bp and copy the key from the dashboard.
Bluehost account We'll deploy the app to a cheap shared‑hosting plan. Get started here: https://bluehost.sjv.io/5k0d52
Git (optional) Helpful for version control and pushing to the server.
A small voice sample (10‑30 seconds) The API needs a reference clip to build the clone.

2. Setting Up the Local Project

Create a new folder and set up a virtual environment:

mkdir voice-clone-demo
cd voice-clone-demo
python -m venv venv
source venv/bin/activate   # Windows: venv\Scripts\activate
pip install flask python-dotenv requests
Enter fullscreen mode Exit fullscreen mode

Create a .env file to keep your secret key out of source control:

ELEVENLABS_API_KEY=your_elevenlabs_api_key_here
Enter fullscreen mode Exit fullscreen mode

2.1. Flask Boilerplate

app.py

import os
import base64
import requests
from flask import Flask, request, render_template, jsonify
from dotenv import load_dotenv

load_dotenv()
app = Flask(__name__)

ELEVENLABS_API_KEY = os.getenv("ELEVENLABS_API_KEY")
BASE_URL = "https://api.elevenlabs.io/v1"

def create_voice(voice_name, audio_bytes):
    """Upload a short audio sample and ask ElevenLabs to create a clone."""
    url = f"{BASE_URL}/voices/add"
    headers = {
        "xi-api-key": ELEVENLABS_API_KEY,
        "Content-Type": "application/json"
    }
    payload = {
        "name": voice_name,
        "samples": [base64.b64encode(audio_bytes).decode()],
        "description": "Demo clone from Flask app"
    }
    resp = requests.post(url, json=payload, headers=headers)
    resp.raise_for_status()
    return resp.json()["voice_id"]

def synthesize(voice_id, text):
    """Generate audio from the cloned voice."""
    url = f"{BASE_URL}/text-to-speech/{voice_id}"
    headers = {
        "xi-api-key": ELEVENLABS_API_KEY,
        "Content-Type": "application/json"
    }
    payload = {
        "text": text,
        "model_id": "eleven_monolingual_v1",
        "voice_settings": {"stability": 0.75, "similarity_boost": 0.85}
    }
    resp = requests.post(url, json=payload, headers=headers)
    resp.raise_for_status()
    return resp.content  # raw MP3 bytes

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        # 1️⃣ Get the uploaded sample and create a voice
        sample = request.files["sample"]
        voice_name = request.form.get("voice_name", "DemoVoice")
        voice_id = create_voice(voice_name, sample.read())

        # 2️⃣ Synthesize the user‑provided text
        text = request.form["text"]
        audio = synthesize(voice_id, text)

        # Return audio as a downloadable file
        return (
            audio,
            200,
            {
                "Content-Type": "audio/mpeg",
                "Content-Disposition": f'attachment; filename="{voice_name}.mp3"',
            },
        )
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)
Enter fullscreen mode Exit fullscreen mode

2.2. Simple HTML Form

Create a templates folder and add index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Voice Cloning Demo</title>
  <style>
    body {font-family: Arial, sans-serif; max-width: 600px; margin: 2rem auto;}
    input, textarea {width: 100%; margin: .5rem 0;}
  </style>
</head>
<body>
  <h1>Clone Your Voice in Seconds</h1>
  <form method="POST" enctype="multipart/form-data">
    <label>Voice name (optional):</label>
    <input type="text" name="voice_name" placeholder="MyClone">
    <label>Upload a 10‑30 s voice sample (WAV/MP3):</label>
    <input type="file" name="sample" accept=".wav,.mp3" required>
    <label>Text you want spoken:</label>
    <textarea name="text" rows="4" placeholder="Hello, world!" required></textarea>
    <button type="submit">Generate Audio</button>
  </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Run it locally:

flask run
Enter fullscreen mode Exit fullscreen mode

Visit http://127.0.0.1:5000, upload a short clip, type some text, and you’ll get a downloadable MP3 that sounds just like the original speaker. All the heavy lifting is done by ElevenLabs—no need to train your own model.

3. Preparing for Deployment on Bluehost

3.1. Why Bluehost?

Bluehost’s shared‑hosting plans support Python via Passenger (or you can enable a cheap VPS). The control panel gives you a one‑click Git deployment, automatic SSL, and a built‑in file manager—perfect for a quick demo. Plus, the pricing starts at just a few dollars a month, making it the most affordable way to showcase a voice‑AI project publicly.

3.2. Create a Python App on Bluehost

  1. Log in to your Bluehost dashboard (use the link: https://bluehost.sjv.io/5k0d52).
  2. Navigate to cPanel → Setup → Python App.
  3. Choose a name like voiceclone, select Python 3.9, and set the app directory to ~/voiceclone.
  4. Click Create. Bluehost will spin up a virtual environment and give you a WSGI entry point (e.g., passenger_wsgi.py).

3.3. Push Your Code

You have two options:

  • Git – Initialize a repo locally, push to a remote (GitHub, GitLab), then use Bluehost’s “Deploy from Git” button.
  • FTP – Zip the project and upload via the File Manager.

Example using Git:

git init
git add .
git commit -m "Initial voice clone demo"
git remote add origin https://github.com/youruser/voice-clone-demo.git
git push -u origin master
Enter fullscreen mode Exit fullscreen mode

In the Bluehost UI, point the Python app to the repository URL and select the master branch. The platform will run pip install -r requirements.txt automatically.

3.4. Adjust the WSGI Entry Point

Create passenger_wsgi.py in the app root:

import sys
import os

# Add the project folder to the Python path
project_home = os.path.expanduser('~/voiceclone')
if project_home not in sys.path:
    sys.path.insert(0, project_home)

# Load the Flask app
from app import app as application
Enter fullscreen mode Exit fullscreen mode

Bluehost will now serve the Flask app at https://yourdomain.com. Test it by visiting the URL; the same form should appear.

3.5. Secure Your API Key

Bluehost’s Environment Variables section lets you add ELEVENLABS_API_KEY without committing it to the repo. Click Add Variable, paste the key, and save. The .env file is no longer required on the server.

4. Going Live – A Few Tips

Tip Why it matters
Enable HTTPS Bluehost provides a free Let’s Encrypt certificate with a single click. Voice data is sensitive; always serve over TLS.
Set a modest request timeout ElevenLabs can take a couple of seconds for longer texts. In app.py, wrap the requests.post calls in a try/except and return a friendly error if the API times out.
Rate‑limit Prevent a single user from hammering the API. A simple Flask‑Limiter (pip install Flask-Limiter) works well on shared hosting.
Monitor usage The ElevenLabs dashboard shows token consumption. Keep an eye on it to avoid surprise bills.

5. Extending the Demo

  • Add a playback widget – Return a base64‑encoded audio string and embed it in an HTML <audio> tag for instant playback.
  • Multiple voice slots – Store generated voice_ids in a lightweight SQLite DB so users can reuse clones without re‑uploading.
  • Front‑end polish – Use a UI framework like Tailwind CSS to make the demo look production‑ready.

All of these upgrades can be pushed to Bluehost with the same Git workflow we used above.

6. Wrap‑Up

You now have a fully functional voice‑cloning demo that runs on a public URL, all powered by ElevenLabs and hosted on Bluehost. The steps were straightforward:

  1. Grab an ElevenLabs API key.
  2. Build a Flask wrapper around the text‑to‑speech endpoint.
  3. Deploy the app to Bluehost using their Python‑app feature.
  4. Secure, test, and share the link with anyone who wants to hear a custom voice.

Feel free to fork the repo, experiment with longer texts, or integrate the endpoint into a larger chatbot or video‑generation pipeline. The sky’s the limit when you combine high‑quality voice synthesis with a cheap, reliable host.

Ready to give it a spin? Sign up for ElevenLabs here: https://try.elevenlabs.io/kr07zfuqn1bp and start cloning voices today. When you’re ready to show the world, launch your app on Bluehost: https://bluehost.sjv.io/5k0d52. Happy coding!

Top comments (0)