Ajouter la synthèse vocale en JavaScript

Nul besoin d’un framework pour ajouter la synthèse vocale (TTS) à votre site web. Que vous travailliez en HTML et JavaScript purs, avec un générateur de site statique ou sur une page rendue côté serveur, donner une voix à votre contenu est simple.

Ce guide explique comment fonctionne la synthèse vocale du navigateur, les compromis des différentes approches et comment intégrer TTS2Go dans n’importe quel projet JavaScript.

Les navigateurs modernes intègrent nativement la Web Speech API. Avec quelques lignes de JavaScript natif, vous pouvez :

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

Aucun paquet npm, aucune clé d’API, aucun serveur requis. C’est gratuit et cela fonctionne hors ligne.

L’inconvénient, c’est la qualité et la cohérence :

• Les voix sonnent souvent robotiques.
• La qualité et le choix des voix varient d’une plateforme à l’autre.
• Chrome sous Windows ne sonne pas comme Safari sous macOS.
• Vous ne pouvez pas garantir une expérience d’écoute homogène à tous vos utilisateurs.

La synthèse vocale par IA a transformé ce qu’il est possible de faire avec la voix sur le web. Les modèles vocaux neuronaux produisent un audio qui sonne réellement humain, avec des pauses, des intonations et un rythme naturels.

Une option consiste à pré-générer l’audio de tout votre contenu et à héberger les fichiers sur un CDN.

Avantages

• Lecture instantanée pour les utilisateurs
• Qualité et voix identiques partout

Inconvénients

• Vous payez d’avance la génération audio de chaque contenu, qu’il soit écouté ou non
• Le contenu doit être connu à l’avance
• Chaque mise à jour impose de régénérer les fichiers
• Les coûts de stockage augmentent avec votre bibliothèque de contenus

La pré-génération convient bien aux petits catalogues stables, mais devient coûteuse et rigide à grande échelle.

Une approche plus efficace consiste à ne générer l’audio que lorsque quelqu’un clique réellement sur lecture.

Avantages

• Vous ne payez que l’audio demandé par les utilisateurs
• Le contenu dynamique et généré par les utilisateurs est pris en charge naturellement

Le défi

Sans aucun contrôle, n’importe quel visiteur de votre site pourrait déclencher des générations coûteuses. Il vous faut un moyen de décider ce qui est généré et quand, afin de maîtriser votre budget tout en proposant la synthèse vocale partout.

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

1. Une clé côté client sans risque

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 et de limitation de débit, pas un secret.

1. Premier visiteur : synthèse du navigateur immédiate + génération en arrière-plan

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.

1. Validation et maîtrise du budget

Dans votre tableau de bord TTS2Go, vous pouvez :

• Valider manuellement les demandes de génération, 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.

1. Visiteurs suivants : audio IA premium depuis le CDN

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 obtient un audio IA de haute qualité dans la voix de votre choix, diffusé instantanément depuis le CDN de TTS2Go.

En pratique : le premier visiteur obtient la synthèse du navigateur, les coûts sont maîtrisés grâce à la validation, et tous les suivants profitent d’un audio IA premium.

Installez le paquet JavaScript natif de TTS2Go avec npm :

npm install @tts2go/vanilla

Si vous n’utilisez pas de bundler, vous pouvez le charger depuis un CDN avec une balise <script> et y accéder via window.TTS2Go.

Initialisez une nouvelle instance TTS2Go avec les identifiants de votre projet :

import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

Appelez tts.create() avec votre texte et un identifiant de voix pour obtenir une instance TTS dotée de commandes de lecture complètes :

const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

À partir de là, vous pouvez explorer toute l’API JavaScript de TTS2Go, notamment :

• tts.getVoices() – lister les voix disponibles pour votre projet