DEV Community

VoiceDeveloper
VoiceDeveloper

Posted on

Using ElevenLabs in Electron Desktop Apps

#webdev #tutorial #javascript #ai

Why Voice AI Matters in Electron Apps

If you’ve been building desktop utilities, productivity tools, or even simple chatbots with Electron, you’ve probably noticed how much more engaging an app can feel when it speaks. Whether it’s announcing a completed download, reading out a notification, or providing a hands‑free user experience, text‑to‑speech (TTS) can turn a static interface into a conversational companion.

But implementing high‑quality TTS isn’t as simple as pulling an old “say” command from the terminal. You need a service that can:

  • Deliver natural‑sounding voices in multiple languages
  • Offer voice cloning so your app can “speak like you”
  • Be easy to integrate into a Node/Electron environment
  • Provide a generous free tier or affordable pricing

That’s where ElevenLabs comes in. Their API gives developers instant access to state‑of‑the‑art neural voices and a straightforward way to clone a voice from just a few minutes of audio. In this article we’ll walk through how to hook ElevenLabs into an Electron desktop app, from authentication to playing the synthesized speech right inside your window.

Tip: If you’re curious to try ElevenLabs for yourself, sign up here: https://try.elevenlabs.io/kr07zfuqn1bp

1. Setting the Stage

Before diving into code, make sure you have:

  1. Node.js 18+ (Electron bundles its own runtime, but you’ll need Node for development).
  2. Electron installed in a new or existing project.
  3. An ElevenLabs API key. Register at the link above, and you’ll get a key in the dashboard.

Create a fresh Electron project (or add to an existing one):

mkdir voice-electron
cd voice-electron
npm init -y
npm install electron @electron/remote
Enter fullscreen mode Exit fullscreen mode

Add a minimal main.js to launch a window:

// main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 600,
    height: 400,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // expose a simple API to the renderer
      contextIsolation: true,
      enableRemoteModule: false
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)
Enter fullscreen mode Exit fullscreen mode

And a simple index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ElevenLabs TTS Demo</title>
</head>
<body>
  <h1>Voice Demo</h1>
  <textarea id="text" rows="6" cols="60" placeholder="Type something to hear it speak..."></textarea>
  <br>
  <button id="speak">Speak</button>
  <script src="renderer.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. Wiring the ElevenLabs API

2.1. Create a Simple Helper

We’ll keep the API logic in a separate file so it can be reused or unit‑tested.

// tts.js
const fetch = require('node-fetch')

const ELEVEN_API_KEY = process.env.ELEVEN_API_KEY
const BASE_URL = 'https://api.elevenlabs.io/v1'

/**
 * Generate a speech audio buffer from text.
 * @param {string} text
 * @returns {Promise<Buffer>} Raw audio bytes (MP3)
 */
async function synthesizeText(text) {
  const res = await fetch(`${BASE_URL}/text-to-speech/${process.env.VOICE_ID}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'xi-api-key': ELEVEN_API_KEY
    },
    body: JSON.stringify({
      text,
      voice_settings: {
        stability: 0.5,
        similarity_boost: 0.75
      }
    })
  })

  if (!res.ok) {
    const err = await res.text()
    throw new Error(`ElevenLabs error: ${err}`)
  }

  return Buffer.from(await res.arrayBuffer())
}

module.exports = { synthesizeText }
Enter fullscreen mode Exit fullscreen mode

Note: You’ll need to set two environment variables in your development environment:

  • ELEVEN_API_KEY – your secret key from ElevenLabs
  • VOICE_ID – the ID of the voice you want to use (default voices are listed in the dashboard)

You can also use a cloned voice ID if you’ve already created one.

2.2. Expose the Helper to the Renderer

Electron’s main and renderer processes are sandboxed. The easiest way to keep the network request in the main process (so you can use Node’s fetch) is to expose a simple API via a preload script.

// preload.js
const { contextBridge } = require('electron')
const { synthesizeText } = require('./tts')

contextBridge.exposeInMainWorld('tts', {
  speak: async (text) => {
    const audioBuffer = await synthesizeText(text)
    // Return the buffer as a base64 string
    return audioBuffer.toString('base64')
  }
})
Enter fullscreen mode Exit fullscreen mode

Now the renderer can call window.tts.speak() and receive the audio data.

3. Playing the Audio in the Renderer

Electron’s renderer can play audio just like any web page. The trick is converting the base64 buffer back into a playable source.

// renderer.js
const speakBtn = document.getElementById('speak')
const textArea = document.getElementById('text')

speakBtn.addEventListener('click', async () => {
  const text = textArea.value.trim()
  if (!text) return

  try {
    const base64Audio = await window.tts.speak(text)
    const audioSrc = `data:audio/mp3;base64,${base64Audio}`
    const audio = new Audio(audioSrc)
    audio.play()
  } catch (err) {
    console.error(err)
    alert('Could not synthesize speech')
  }
})
Enter fullscreen mode Exit fullscreen mode

That’s it—type something, hit “Speak,” and your Electron window will play the TTS output. You can extend this to add a loading spinner, error handling, or even stream the audio to a speaker device.

4. Voice Cloning in a Desktop App

One of ElevenLabs’ standout features is the ability to clone a voice from just a few minutes of speech. The workflow in Electron is essentially the same, but you’ll need to upload the audio sample first.

// tts.js – add a new function
async function uploadVoiceSample(fileBuffer, sampleName) {
  const res = await fetch(`${BASE_URL}/voice-cloning`, {
    method: 'POST',
    headers: {
      'Content-Type': 'audio/mpeg',
      'xi-api-key': ELEVEN_API_KEY,
      'User-Agent': 'Electron-TTS-App'
    },
    body: fileBuffer
  })

  if (!res.ok) {
    const err = await res.text()
    throw new Error(`Upload error: ${err}`)
  }

  const data = await res.json()
  return data.voice_id
}
Enter fullscreen mode Exit fullscreen mode

From the renderer, you can let the user pick a local MP3 file, read it into a buffer, and call uploadVoiceSample. Once you receive the new voice_id, you can store it in a local config file or environment variable and use it for subsequent TTS calls.

5. Handling Large Text and Streaming

For very long passages, ElevenLabs recommends streaming the audio rather than pulling the entire buffer at once. Electron’s renderer can consume a ReadableStream directly via the MediaSource API, but that’s a bit more involved. For most desktop apps, the buffer approach above is perfectly fine and keeps the code simple.

If you hit rate limits or need to handle higher loads, consider:

  • Caching: Store recently synthesized audio locally to avoid repeated API calls.
  • Batching: Send multiple short requests in parallel if your UI allows it.
  • Retry logic: Implement exponential backoff for transient network errors.

6. Putting It All Together

Let’s recap the flow:

  1. User types text in the Electron window.
  2. The renderer calls window.tts.speak().
  3. The preload forwards the request to the main process.
  4. The main process calls ElevenLabs’ /text-to-speech endpoint.
  5. The response (MP3 bytes) is base64‑encoded and sent back to the renderer.
  6. The renderer creates an Audio object and plays it.

With voice cloning, you add an extra step of uploading a sample and storing the returned voice_id. After that, the same flow applies—just replace the voice ID in the request payload.

7. Common Pitfalls & Quick Fixes

Symptom Likely Cause Fix
404 or 401 on API call Wrong endpoint or missing API key Double‑check ELEVEN_API_KEY and the base URL
Audio doesn’t play Buffer corrupted or wrong MIME type Ensure you’re using audio/mp3 and base64 correctly
High latency Large text or network hiccup Cache short passages or use a faster connection

8. Next Steps

Now that you can get ElevenLabs to speak in your Electron app, consider adding:

  • Real‑time transcription (ElevenLabs also offers speech‑to‑text)
  • Dynamic voice selection (let users pick from a list of available voices)
  • Offline fallback (fallback to a local TTS engine when the network is down)

ElevenLabs offers a generous free tier and competitive pricing for paid plans. If you’re building a voice‑centric product, it’s hard to beat the quality and ease of use.

Call to Action

Ready to give your desktop app a voice? Sign up for ElevenLabs today and start building conversational experiences that feel truly human. 🚀

Try ElevenLabs now: https://try.elevenlabs.io/kr07zfuqn1bp

Top comments (0)