🔥 ElevenLabs avec React : API text-to-speech (TTS)

Des bénéfices qui dépendent du contexte

Quelques situations où la voix peut vraiment servir :

• Accessibilité et consultation : proposer la lecture de contenus, d'instructions ou de réponses. Cela peut compléter des fonctions d'accessibilité, mais ne remplace pas une interface accessible ni la compatibilité avec les lecteurs d'écran.
• Formation et information : lire un contenu pédagogique ou une procédure, surtout quand l'utilisateur fait autre chose en même temps.
• Jeux et expériences interactives : générer des dialogues qui évoluent selon les choix.
• Service client : ajouter une sortie vocale à un assistant existant, si l'audio s'intègre vraiment au parcours de résolution.
• Identité de marque : utiliser une voix cohérente sur plusieurs points de contact. Le clonage vocal demande toutefois un cadre clair (consentement, droits, etc.).

Pour une équipe produit, la question utile n'est donc pas « peut-on ajouter une voix ? », mais « quelle tâche devient plus simple grâce à elle ? ». Mesurez l'impact : taux d'utilisation, réussite de la tâche, temps nécessaire, abandon, retours utilisateurs. Le volume d'audio généré ne suffit pas à prouver la valeur.

Le bon niveau d'ambition pour démarrer

Un prototype qui lit un texte saisi par l'utilisateur permet de valider rapidement l'intégration technique. Il ne prouve pas encore qu'il existe un vrai besoin métier. Pour passer en production, il faut décider qui peut générer de l'audio, quels contenus sont autorisés, combien de temps on conserve les fichiers et comment on affiche les erreurs.

C'est souvent là que se voit la différence entre une démo et une fonctionnalité exploitable. Un bouton « Parler » est facile. Une fonctionnalité fiable doit aussi gérer les requêtes répétées, les délais réseau, les quotas, les coûts et les cas où l'utilisateur ne peut pas (ou ne veut pas) écouter.

Préparer le projet et le serveur

Vous pouvez partir d'une application React existante ou en créer une avec l'outil de votre choix. Côté serveur, l'exemple ci-dessous utilise Node.js, Express, et une version récente de Node qui supporte fetch.

npm install express dotenv

Créez un fichier .env sur le serveur, pas dans le dossier public de l'application React :

ELEVENLABS_API_KEY=votre_cle_api
PORT=3001

Ajoutez .env au fichier .gitignore. Ne mettez jamais la clé dans un dépôt, un ticket ou un journal d'erreurs. En production, utilisez le gestionnaire de secrets de votre hébergeur.

Voici un endpoint minimal : il reçoit le texte, appelle ElevenLabs, puis renvoie l'audio.

import express from "express";
import "dotenv/config";
const app = express();
app.use(express.json({ limit: "20kb" }));
const voixAutorisees = new Set(["ID_DE_VOIX_AUTORISE"]);
app.post("/api/speech", async (req, res) => {
const { text, voiceId } = req.body;
if (typeof text !== "string" || !text.trim() || text.length > 3000) {
return res.status(400).json({ error: "Texte invalide ou trop long." });
}
if (!voixAutorisees.has(voiceId)) {
return res.status(400).json({ error: "Voix non autorisée." });
}
try {
const response = await fetch(
`https://api.elevenlabs.io/v1/text-to-speech/${encodeURIComponent(voiceId)}`,
{
method: "POST",
headers: {
"xi-api-key": process.env.ELEVENLABS_API_KEY,
"Content-Type": "application/json",
Accept: "audio/mpeg"
},
body: JSON.stringify({
text: text.trim(),
voice_settings: { stability: 0.75, similarity_boost: 0.85 }
})
}
);
if (!response.ok) {
return res.status(response.status).json({ error: "La génération audio a échoué." });
}
const audio = Buffer.from(await response.arrayBuffer());
res.type("audio/mpeg").send(audio);
} catch (error) {
console.error("Échec de la génération vocale");
res.status(502).json({ error: "Le service vocal est temporairement indisponible." });
}
});
app.listen(process.env.PORT || 3001);

Remplacez ID_DE_VOIX_AUTORISE par un identifiant de voix que votre application a le droit d'utiliser. En production, ajoutez de l'authentification, une limitation du nombre de requêtes par utilisateur, des contrôles de taille, et une gestion d'erreurs cohérente. Une limite codée en dur n'est qu'un exemple : ajustez-la selon vos textes, vos coûts et vos contraintes.

Appeler votre endpoint depuis React

Le composant ci-dessous envoie le texte à votre serveur, récupère le résultat sous forme de Blob, puis propose la lecture côté navigateur.

import { useEffect, useState } from "react";
export default function VoiceInput() {
const [text, setText] = useState("");
const [audioUrl, setAudioUrl] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
useEffect(() => {
return () => {
if (audioUrl) URL.revokeObjectURL(audioUrl);
};
}, [audioUrl]);
async function handleSpeak() {
if (!text.trim() || loading) return;
setLoading(true);
setError("");
try {
const response = await fetch("/api/speech", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
text,
voiceId: "ID_DE_VOIX_AUTORISE"
})
});
if (!response.ok) {
throw new Error("Impossible de générer l'audio. Réessayez plus tard.");
}
const audioBlob = await response.blob();
setAudioUrl(URL.createObjectURL(audioBlob));
} catch (err) {
setError(err.message || "Une erreur est survenue.");
} finally {
setLoading(false);
}
}
return (
<section>
<label htmlFor="texte-a-lire">Texte à lire</label>
<textarea
id="texte-a-lire"
rows={4}
value={text}
onChange={(event) => setText(event.target.value)}
maxLength={3000}
/>
<button onClick={handleSpeak} disabled={loading || !text.trim()}>
{loading ? "Génération en cours..." : "Écouter"}
</button>
{error && <p role="alert">{error}</p>}
{audioUrl && <audio controls src={audioUrl} />}
</section>
);
}

Le composant libère l'URL temporaire quand elle n'est plus utilisée. C'est pratique : si l'utilisateur relance plusieurs fois dans la même session, ça évite d'empiler des ressources en mémoire. En production, pensez aussi à un état de chargement clair, à la possibilité d'annuler/remplacer une génération, et à un comportement explicite si le navigateur ne lit pas le format renvoyé.

Quand le streaming fait vraiment gagner quelque chose

Sur des réponses longues (ou quand vous voulez que l'assistant commence à parler vite), la latence perçue devient centrale. Avant de partir sur une architecture plus complexe, il faut vérifier que chaque maillon - endpoint, serveur, transport HTTP et lecteur du navigateur - supporte un traitement progressif compatible. Le résultat dépend du format audio et de la stratégie de lecture : testez sur vos navigateurs et appareils cibles.

Une mise en œuvre progressive suppose généralement que le serveur relaie les morceaux sans tout stocker, et que le client sache les jouer au fur et à mesure. Attention : accumuler via ReadableStream dans un tableau, puis ne créer un Blob qu'à la fin, ne change rien pour l'utilisateur - il attend toujours le téléchargement complet.

Avant d'investir, mesurez : délai entre la demande, le premier octet et le début réel de la lecture. Si vos textes sont courts et que l'attente reste acceptable, le téléchargement « complet » reste souvent le meilleur compromis (moins de code, moins de cas limites, debug plus facile).

Gérer les erreurs et les requêtes concurrentes

Une intégration sérieuse doit au minimum distinguer :

• les erreurs de validation (texte vide, trop long, etc.) ;
• les erreurs d'authentification ou de configuration ;
• les limites de quota ou de débit, parfois signalées par une réponse HTTP 429 ;
• les erreurs réseau (timeouts, indisponibilité du service).

Ne relancez pas automatiquement tout. Une erreur 429 peut justifier une attente et un nombre limité de tentatives, mais une erreur de validation ne se corrige pas en réessayant. Ajoutez une file d'attente ou une limite de concurrence si plusieurs demandes peuvent partir en même temps. Et évitez que le fait de cliquer plusieurs fois déclenche plusieurs générations identiques.

Pour réduire les coûts sur des requêtes « chères », pensez aussi à la déduplication ou à une mise en cache quand texte/voix/réglages sont identiques et que votre politique de conservation le permet. Le cache limite les appels facturés, mais il implique de définir la durée de conservation et le traitement des données audio. Ce choix doit être cohérent avec votre politique produit et vos obligations côté protection des données.

Évaluer le coût avant le lancement

Les tarifs, les quotas gratuits et les conditions fournisseurs peuvent changer. Donc, évitez de bâtir un budget de production à partir d'un chiffre trouvé dans un ancien tutoriel. Vérifiez les conditions actuelles du compte et de l'API ElevenLabs, puis estimez à partir de votre usage réel.

Une méthode simple consiste à suivre : nombre de caractères envoyés, nombre de générations, longueur moyenne des textes, et taux de répétition. Ajoutez aussi les essais de développement, les échecs et les usages inattendus. Un bouton « illimité » peut transformer une démo en facture surprenante.

Pour un lancement, prévoyez une enveloppe, des alertes et des limites par utilisateur ou par période. La mise en cache peut aider si le même contenu revient souvent. En revanche, générer tout à l'avance pour toutes les variantes possibles est rarement rentable quand la demande n'est pas stable.

Protéger les données et les droits liés à la voix

Le texte envoyé à un fournisseur est une donnée transmise à un tiers. N'y mettez pas d'informations personnelles ou confidentielles sans avoir évalué le besoin, le contrat et les conditions de traitement. En contexte européen, impliquez votre responsable de la protection des données si le traitement touche des données personnelles, et regardez les exigences du RGPD, ainsi que vos règles internes de conservation et de sécurité.

Le clonage vocal demande une vigilance supplémentaire. N'utilisez pas la voix d'une personne sans autorisation adéquate, et vérifiez le cadre du service, les droits liés à l'image et à la voix, ainsi que les usages prévus. Et gardez en tête un point un peu « pratique » : une voix synthétique peut donner l'impression qu'une personne a réellement prononcé un message. Si cette confusion peut avoir des conséquences, indiquez clairement qu'il s'agit d'un contenu généré.

Pour aller plus loin, consultez les ressources de la CNIL sur l'intelligence artificielle et la documentation officielle d'ElevenLabs. Les choix juridiques dépendent du contexte : un exemple de code ne remplace pas cette analyse.