DEV Community

VoiceDeveloper
VoiceDeveloper

Posted on

Build a Voice Notification System with ElevenLabs

#webdev #tutorial #javascript #ai

Why Voice Notifications Matter

In a world where instant alerts are the new status updates, a voice‑first notification system can turn a simple “you have a new message” into an engaging, hands‑free experience. Whether you’re building a smart home dashboard, a customer‑support bot, or a mobile app that needs to keep users informed even when their eyes are elsewhere, text‑to‑speech (TTS) gives you that extra layer of accessibility and immersion.

Instead of relying on generic TTS engines that sound robotic, modern voice AI platforms let you create personalized, natural‑sounding voices that match your brand or user persona. In this post we’ll walk through how to build a lightweight voice notification system using ElevenLabs—a cloud‑based TTS service that offers high‑quality voice cloning, real‑time streaming, and an easy‑to‑use API.

1. Set Up Your ElevenLabs Account

Before we dive into code, head over to the ElevenLabs sign‑up page and register. They provide a generous free tier that’s perfect for prototyping. Once you’re signed up, grab your API key from the dashboard.

Tip: Keep your API key secret. Store it in environment variables or a secrets manager.

2. Create a Voice Profile

ElevenLabs supports two main modes:

Mode Use‑Case Example
Standard Quick, one‑off notifications “Hey, your order has shipped.”
Voice Cloning Brand‑specific or personalized voices A “virtual assistant” that sounds like your CEO.

To clone a voice, you’ll need a short audio sample (30‑60 seconds). ElevenLabs will process it and generate a voice model you can reuse.

# Example curl to create a new voice
curl -X POST "https://api.elevenlabs.io/v1/voices" \
  -H "xi-api-key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
        "name": "my-brand-voice",
        "description": "Voice for our brand assistant"
      }'
Enter fullscreen mode Exit fullscreen mode

You’ll receive a voice_id that you’ll use in subsequent requests.

3. Generate Speech from Text

Once you have a voice ID, you can synthesize speech. ElevenLabs offers both synchronous (downloadable audio file) and streaming (real‑time audio) endpoints. For a notification system, streaming is usually the way to go so users hear the alert immediately.

Python Example 

import os
import requests

API_KEY = os.getenv("ELEVENLABS_API_KEY")
VOICE_ID = "my-brand-voice"
TEXT = "Your order is now on the way!"

headers = {
    "xi-api-key": API_KEY,
    "accept": "audio/mpeg",
    "Content-Type": "application/json"
}

data = {
    "text": TEXT,
    "voice_id": VOICE_ID,
    "model_id": "eleven_monolingual_v1",
    "output_format": "mp3"
}

response = requests.post(
    "https://api.elevenlabs.io/v1/text-to-speech/" + VOICE_ID,
    headers=headers,
    json=data,
    stream=True
)

# Stream to a file or directly to an audio player
with open("notification.mp3", "wb") as f:
    for chunk in response.iter_content(chunk_size=1024):
        if chunk:
            f.write(chunk)
Enter fullscreen mode Exit fullscreen mode

JavaScript (Node.js) Example 

const fs = require('fs');
const fetch = require('node-fetch');

const apiKey = process.env.ELEVENLABS_API_KEY;
const voiceId = 'my-brand-voice';
const text = 'Your meeting starts in 5 minutes.';

const payload = {
  text,
  voice_id: voiceId,
  model_id: 'eleven_monolingual_v1',
  output_format: 'mp3'
};

fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
  method: 'POST',
  headers: {
    'xi-api-key': apiKey,
    'Content-Type': 'application/json',
    'Accept': 'audio/mpeg'
  },
  body: JSON.stringify(payload)
})
  .then(res => res.body.pipe(fs.createWriteStream('meeting.mp3')))
  .catch(console.error);
Enter fullscreen mode Exit fullscreen mode

4. Integrate Into a Notification Workflow

Let’s tie everything together. Imagine you’re building a Node.js backend that sends a voice alert whenever a new support ticket lands.

  1. Webhook – Your ticketing system posts a JSON payload to your endpoint.
  2. Process – Extract the relevant details (ticket ID, priority).
  3. Generate Speech – Call ElevenLabs’ TTS API with a templated message.
  4. Send Audio – Stream the MP3 to the user’s browser or push it to a smart speaker. 
app.post('/webhook/ticket', async (req, res) => {
  const { ticketId, priority } = req.body;

  const message = `New ticket #${ticketId} with priority ${priority}.`;

  // Call ElevenLabs (reuse the snippet from above)
  // ...

  // Respond with the audio URL or stream
  res.json({ audio_url: 'https://yourcdn.com/notifications/ticket.mp3' });
});
Enter fullscreen mode Exit fullscreen mode

If you prefer a real‑time experience, ElevenLabs also supports WebSocket streaming. The API documentation walks you through the exact handshake and data format. For most use‑cases, the synchronous endpoint is sufficient and much easier to debug.

5. Add Voice Customization

You can tweak pitch, speed, and emphasis to make alerts feel urgent or calm. ElevenLabs lets you pass these parameters in the request body:

{
  "text": "Attention: system overload detected!",
  "voice_id": "my-brand-voice",
  "model_id": "eleven_monolingual_v1",
  "output_format": "mp3",
  "voice_settings": {
    "stability": 0.5,
    "similarity_boost": 0.5,
    "style": 0.75,
    "use_speaker_boost": true
  }
}
Enter fullscreen mode Exit fullscreen mode

Play around with stability (clarity vs. naturalness) and similarity_boost (how close the clone sounds to the source). The best way to find the sweet spot is to generate a few samples and let your users vote.

6. Handle Edge Cases

Scenario Recommendation
Large Text Break into sentences, synthesize each chunk separately, then concatenate.
Multiple Languages ElevenLabs supports multi‑lingual models. Specify model_id: eleven_multilingual_v1 and set the language field.
Rate Limits Cache generated audio for frequent alerts. Use a CDN to serve the MP3s.
User Preferences Allow users to toggle voice notifications on/off and choose between default or personalized voices.

7. Testing & Deployment

  1. Unit Tests – Mock the ElevenLabs endpoint and assert that your code handles 200/400 responses correctly.
  2. Load Testing – Simulate a burst of notifications to ensure your backend can queue and stream requests without timing out.
  3. CI/CD – Store your API key in a secrets manager (e.g., GitHub Actions Secrets, AWS Secrets Manager) and reference it in your deployment pipeline.

8. Going Beyond: Real‑Time Alerts on Smart Speakers

If you want your notifications to reach Amazon Alexa or Google Home, you’ll need to expose an HTTPS endpoint that the voice assistant can call. Once you have the audio file, you can push it to the device using the respective SDKs. ElevenLabs’ API is agnostic of the target device, so you’re free to build a multi‑platform notification engine.

Wrap‑Up

Building a voice notification system isn’t just about converting text to speech; it’s about delivering information in a way that feels natural and engaging. With ElevenLabs, you get:

  • High‑fidelity voice cloning that can match your brand or user voice.
  • Simple API calls that integrate into any language or framework.
  • Flexible pricing that scales from prototyping to production.

Now that you have the roadmap, it’s time to add that human touch to your alerts. Try ElevenLabs today and transform your notification strategy into a voice‑rich experience that users will appreciate.

Ready to get started? Sign up now at https://try.elevenlabs.io/kr07zfuqn1bp and let your messages speak for themselves.

Top comments (0)