Ajouter la synthèse vocale à React

La synthèse vocale devient rapidement une fonctionnalité incontournable du web moderne. Que ce soit pour l’accessibilité, l’engagement ou simplement pour offrir aux utilisateurs une autre façon de consommer du contenu, ajouter la voix à votre projet React est plus simple que vous ne l’imaginez. Ce guide explique comment fonctionne la synthèse vocale du navigateur, les compromis des différentes approches et comment intégrer TTS2Go à votre application React, étape par étape.

Tous les navigateurs modernes intègrent la Web Speech API. Il suffit d’appeler window.speechSynthesis.speak() avec un SpeechSynthesisUtterance pour entendre un texte lu à voix haute, sans aucun service externe. C’est gratuit, cela ne nécessite aucune clé d’API et tout s’exécute côté client.

Le hic, c’est la qualité. Les voix du navigateur sonnent robotiques, varient selon les systèmes d’exploitation et les navigateurs, et le choix de voix est limité. Un même texte peut sonner de façon complètement différente d’un appareil à l’autre.

La synthèse vocale propulsée par l’IA a changé la donne. Les modèles vocaux neuronaux produisent un audio remarquablement humain, avec une intonation, un débit et une émotion naturels. Ces services prennent en charge des dizaines de langues et des centaines de voix.

La contrepartie : générer cet audio a un coût et nécessite une API, ce qui soulève une question importante : quand et comment le générer ?

Une première approche consiste à générer tout votre audio à l’avance et à le servir sous forme de fichiers statiques. L’avantage : une lecture instantanée, puisque l’audio est déjà sur un CDN, et une qualité constante à chaque écoute.

L’inconvénient, c’est le coût. Vous payez la génération audio de chaque contenu, que quelqu’un l’écoute ou non. Vous devez connaître tout votre contenu à l’avance, ce qui exclut le texte dynamique. Chaque modification de contenu relance un pipeline de génération, et les coûts de stockage augmentent avec votre bibliothèque.

L’alternative consiste à ne générer l’audio que lorsqu’un utilisateur le demande. C’est moins cher, puisque vous ne payez que pour le contenu que les gens veulent réellement écouter, et cela fonctionne avec du contenu dynamique.

Vous devez toutefois protéger votre budget de génération. Un accès sans restriction à une API de synthèse vocale signifie que n’importe qui pourrait déclencher des générations coûteuses. Il vous faut un moyen de contrôler qui obtient l’audio IA, et quand.

TTS2Go adopte une approche intelligente qui équilibre qualité, coût et simplicité.

Vous ajoutez le SDK à votre site avec une clé d’API frontend. Cette clé s’appuie sur le blocage par domaine d’origine et la limitation de débit, ce qui lui permet de figurer sans danger dans votre code côté client. C’est un mécanisme d’identification, pas un secret.

Lorsque la première personne clique sur un bouton de synthèse vocale pour un contenu donné, elle entend immédiatement la synthèse vocale du navigateur. En parallèle, une demande de génération est envoyée à TTS2Go en arrière-plan.

Vous pouvez vous connecter à votre tableau de bord TTS2Go et valider cette demande manuellement, ou configurer le système de validation par IA pour approuver automatiquement les demandes qui répondent à vos critères. Vous gardez ainsi un contrôle total sur votre budget de génération, puisque vous ne payez que l’audio que vous voulez vraiment.

Une fois une demande validée et générée, chaque utilisateur qui clique ensuite sur la synthèse vocale pour ce même contenu profite d’une lecture audio IA de haute qualité dans la voix de votre choix. L’audio est mis en cache sur le CDN de TTS2Go, la lecture est donc instantanée.

Résultat : votre premier visiteur bénéficie d’une expérience fonctionnelle grâce à la synthèse du navigateur, vos coûts de génération sont maîtrisés grâce à la validation, et tous les visiteurs suivants profitent d’un audio IA premium sans coût supplémentaire.

Installez le paquet React de TTS2Go dans le répertoire de votre projet :

npm install @tts2go/react

Le paquet est léger (moins de 15 Ko compressé avec gzip) et n’a aucune dépendance peer en dehors de React.

Enveloppez votre application avec le TTS2GoProvider à la racine de votre arbre de composants. Passez votre clé d’API et l’identifiant de votre projet dans la configuration.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

Utilisez le hook useTTS dans n’importe quel composant pour obtenir les commandes de lecture, de pause et d’arrêt. Vous pouvez aussi intégrer le composant prêt à l’emploi TTSButton pour afficher rapidement une icône de haut-parleur.

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

Le premier utilisateur qui clique sur lecture entend la synthèse du navigateur pendant qu’une demande de génération est envoyée à votre tableau de bord TTS2Go. Une fois celle-ci validée, tous les utilisateurs suivants entendent l’audio IA.

Explorez la sélection des voix, la prise en charge de SSML pour affiner la prononciation, et l’API de surlignage qui synchronise le texte affiché avec les mots prononcés.

Consultez la documentation React complète sur tts2go.com/docs/react pour découvrir des modèles avancés et des exemples.