VoiceDeveloper

Posted on Nov 8

How to Set Up a Voice-Enabled Blog with AI Narration

#ai #tutorial #beginners #webdev

Why a Voice‑Enabled Blog?

Reading long‑form content on a screen can be tiring, especially on mobile. Adding an AI‑generated narration layer lets your audience listen while they commute, work out, or simply give their eyes a break. It also boosts SEO—Google indexes audio transcripts and can surface your posts in “podcast‑style” results.

In this guide you’ll learn how to:

Generate natural‑sounding narration with ElevenLabs.
Serve the audio files from a lightweight Flask API.
Deploy the whole thing on an affordable, beginner‑friendly host—Bluehost.

By the end you’ll have a fully functional, voice‑enabled blog that you can expand with voice cloning, multilingual narration, or even interactive voice assistants.

Choosing the Stack

Component	Why It Fits
ElevenLabs	State‑of‑the‑art text‑to‑speech (TTS) with expressive voice cloning.
Python + Flask	Quick to prototype, easy to host, and has great HTTP libraries.
Bluehost	One‑click WordPress/Node/Python installs, cheap shared plans, and a simple UI for managing domains and SSL.
cURL / fetch	Demonstrates how any front‑end (JS, mobile, etc.) can request the audio.

All the tools are free to start, and the affiliate links below help you get a discount while supporting this tutorial.

Getting Started with ElevenLabs

ElevenLabs provides a REST API that accepts raw text and returns an MP3 stream. Sign up here: https://try.elevenlabs.io/kr07zfuqn1bp. After registration you’ll receive an API key—keep it secret!

A quick test with curl looks like this:

curl -X POST "https://api.elevenlabs.io/v1/text-to-speech/voice-id" \
  -H "Accept: audio/mpeg" \
  -H "Content-Type: application/json" \
  -H "xi-api-key: YOUR_API_KEY" \
  -d '{
        "text": "Welcome to my voice‑enabled blog!",
        "model_id": "eleven_monolingual_v1",
        "voice_settings": {
          "stability": 0.75,
          "similarity_boost": 0.85
        }
      }' --output welcome.mp3

If you hear a smooth, human‑like voice, you’re ready to move on. The voice-id can be any of the pre‑built voices, or a custom clone you’ve trained with ElevenLabs (the same platform). For most blogs the default “Rachel” voice works great out of the box.

Building the API Wrapper (Python)

Below is a minimal Flask app that receives a blog post’s slug, fetches the post content from your CMS (or a static file), and returns an MP3 generated on‑the‑fly.

# app.py
import os
import requests
from flask import Flask, request, send_file, abort
from io import BytesIO

app = Flask(__name__)

ELEVEN_API_KEY = os.getenv("ELEVEN_API_KEY")
ELEVEN_VOICE_ID = "Rachel"  # replace with your preferred voice ID

def synthesize(text: str) -> BytesIO:
    """Call ElevenLabs TTS and return an in‑memory MP3."""
    url = f"https://api.elevenlabs.io/v1/text-to-speech/{ELEVEN_VOICE_ID}"
    payload = {
        "text": text,
        "model_id": "eleven_monolingual_v1",
        "voice_settings": {"stability": 0.75, "similarity_boost": 0.85}
    }
    headers = {
        "Accept": "audio/mpeg",
        "Content-Type": "application/json",
        "xi-api-key": ELEVEN_API_KEY,
    }
    resp = requests.post(url, json=payload, headers=headers)
    if resp.status_code != 200:
        abort(502, description="ElevenLabs TTS failed")
    return BytesIO(resp.content)

def fetch_post_content(slug: str) -> str:
    """Placeholder: replace with real DB or file lookup."""
    # For demo purposes we just read a markdown file.
    try:
        with open(f"posts/{slug}.md", "r", encoding="utf-8") as f:
            return f.read()
    except FileNotFoundError:
        abort(404, description="Post not found")

@app.route("/api/narrate/<slug>")
def narrate(slug):
    text = fetch_post_content(slug)
    audio = synthesize(text)
    return send_file(
        audio,
        mimetype="audio/mpeg",
        as_attachment=False,
        download_name=f"{slug}.mp3"
    )

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000)

How it works

fetch_post_content grabs the raw markdown (or HTML) of the article. Swap this out for a WordPress REST call if you’re using WP on Bluehost.
synthesize posts the text to ElevenLabs and streams the MP3 back without writing to disk.
The Flask route /api/narrate/<slug> returns the MP3 directly, which browsers can play with a simple <audio> tag.

Remember to set the environment variable ELEVEN_API_KEY on your server (or use a .env file with python-dotenv).

Deploying on Bluehost

Bluehost makes the deployment steps feel like dragging‑and‑dropping:

Create a new site – choose the “Python” starter.
Upload your code – either via the built‑in file manager or Git.
Set environment variables – go to cPanel → Setup Python App and add ELEVEN_API_KEY.
Install dependencies – run pip install flask requests.
Start the app – the control panel gives you a URL like https://yourdomain.com/api/narrate/slug.

That’s it. Bluehost handles the web server, SSL, and even auto‑restarts if the process crashes. For most hobbyists this is the easy, affordable way to deploy a voice‑AI project without juggling Docker or a VPS.

If you already run a WordPress blog on Bluehost, you can add a small plugin that injects an <audio> element pointing to the Flask endpoint, turning every post into a listen‑able article with just a few lines of PHP.

Hooking It Up to Your Blog

Assuming your blog uses a templating language (Jinja, Blade, PHP, etc.), add this snippet where you want the player to appear:

<audio controls preload="none">
  <source src="/api/narrate/{{ post.slug }}" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

The preload="none" attribute ensures the audio file isn’t fetched until the user clicks play, saving bandwidth for readers who only want to read.

Optional enhancements

Feature	How to add
Voice cloning	Train a custom voice in ElevenLabs, replace `ELEVEN_VOICE_ID`.
Multilingual narration	Use ElevenLabs’ language models (`model_id: "multilingual_v1"`).
Caching	Store generated MP3s on the filesystem or CDN to avoid re‑synthesizing on every request.
Analytics	Log play events to Google Analytics or a simple SQLite table for insights.

Next Steps

Experiment with voice settings – tweak stability and similarity_boost for a more expressive tone.
Add a “listen” button to your RSS feed, turning your blog into a mini‑podcast.
Combine with OpenAI – generate summaries or Q&A sections that are also narrated.

The sky’s the limit once you have a reliable TTS engine and a cheap, hassle‑free host.

Ready to give your readers a new way to consume content?

Start generating high‑quality audio with ElevenLabs today: https://try.elevenlabs.io/kr07zfuqn1bp

Deploy your Flask narrator on the easy, affordable platform that powers millions of sites: https://bluehost.sjv.io/5k0d52.

Happy coding, and enjoy the sound of your own words!

DEV Community