How to Add Voice to Your React App with ElevenLabs

Description and use

This guide shows how to add voice output to a React app using ElevenLabs, with a REST API, axios, and a custom hook.

Problem

Integrate realistic text‑to‑speech into a React application.

Outcome

The workflow yields a functional React component that converts user‑typed text into spoken audio using ElevenLabs, with clear loading and error handling.

Workflow

• Obtain an ElevenLabs API key via the sign‑up page and dashboard.
• Store the key in a .env file as REACT_APP_ELEVENLABS_API_KEY.
• Create a fresh React project (or use an existing one) and install axios.
• Add a service wrapper in src/api/elevenlabs.js that POSTs to /text-to-speech/{voiceId} and returns an object URL for the MP3 blob.
• Implement a custom hook src/hooks/useElevenLabs.js that manages loading, error, and audioUrl state and exposes a speak(text) function.
• Build a UI component that lets users type text and plays the returned audio URL via an <audio> element.
• Use the hook in the component to trigger synthesis and display loading/error feedback.

Evidence

ElevenLabs – a modern TTS platform that offers ultra‑realistic speech, custom voice cloning, and a straightforward REST API.

Source

We POST the text to /text-to-speech/{voiceId}. The response is an MP3 blob; we turn it into an object URL so the browser can play it instantly.

Source

The hook returns: speak(text): triggers synthesis; audioUrl: a temporary URL you can feed to an <audio> element.

Source