Ajouter la synthèse vocale à Svelte

Svelte repose sur la simplicité et la performance, et ajouter la synthèse vocale (TTS) à une application Svelte peut être tout aussi simple.

Que vous souhaitiez rendre votre contenu plus accessible, créer une expérience de lecture audio ou ajouter un retour vocal, la synthèse vocale s’intègre en quelques minutes. Ce guide explique comment fonctionne la synthèse vocale du navigateur, les compromis des différentes approches de TTS et comment faire tourner TTS2Go dans votre projet Svelte.

Les navigateurs modernes intègrent la Web Speech API, qui vous permet d’appeler window.speechSynthesis.speak() avec un SpeechSynthesisUtterance pour lire un texte à voix haute.

Principales caractéristiques :

• Aucune dépendance : tout s’exécute dans le navigateur.
• Ni clé d’API ni appel serveur : aucune intégration backend requise.
• Aucun coût : utilise les voix intégrées au système.

Il y a toutefois des compromis :

• Qualité robotique et inégale : les voix sonnent souvent synthétiques.
• Dépendance à la plateforme : les voix diffèrent entre Chrome et Firefox, entre macOS et Windows.
• Choix de voix limité : moins de langues et de styles que la synthèse vocale IA moderne.

Les modèles neuronaux de synthèse vocale produisent un audio au rendu naturel, avec une intonation et un débit réalistes. Ils prennent en charge de nombreuses langues, accents et styles de voix, ce qui les rend idéaux pour une narration et des expériences vocales de qualité production.

Les compromis :

• Avantages :
• Audio naturel et de haute qualité
• Large couverture de langues et de voix
• Rendu homogène sur tous les appareils et navigateurs
• Inconvénients :
• Coût : vous payez par caractère ou par seconde d’audio généré.
• Appels d’API : nécessite une intégration côté serveur ou côté client authentifiée.

D’où une question de conception : comment concilier la qualité audio avec les coûts de génération, et contrôler le moment où l’audio est créé ?

Une première approche consiste à pré-générer l’audio de tout votre contenu et à l’héberger sur un CDN.

Fonctionnement :

• Convertir à l’avance tout le contenu texte en fichiers audio.
• Mettre en ligne ces fichiers et les servir depuis un CDN.
• Les utilisateurs bénéficient d’une lecture instantanée, sans délai de génération.

Avantages :

• Lecture instantanée pour chaque visiteur
• Audio homogène et de haute qualité
• Comportement simple à l’exécution (il suffit de lire un fichier)

Inconvénients :

• Vous payez la génération audio de contenus qui ne seront peut-être jamais écoutés.
• Tout le contenu doit être connu à l’avance.
• Chaque modification de contenu impose une régénération.
• Les coûts de stockage et de CDN augmentent avec le volume de contenu.

Pour un contenu dynamique ou fréquemment mis à jour, cette approche devient vite coûteuse et lourde à exploiter.

Une autre stratégie est la génération à la demande (lazy), où l’audio n’est créé que lorsqu’un utilisateur clique réellement sur lecture.

Fonctionnement :

• Lorsqu’un utilisateur demande l’audio d’un contenu, vous appelez l’API de synthèse vocale.
• L’audio généré est mis en cache ou stocké.
• Les demandes suivantes réutilisent l’audio en cache.

Avantages :

• Bien plus économique : vous ne payez que pour le contenu réellement écouté.
• Prend naturellement en charge le contenu dynamique et généré par les utilisateurs.
• Limite les générations inutiles pour les contenus non consultés.

Défis :

• Sans contrôles, n’importe qui pourrait déclencher des générations coûteuses.
• Il vous faut un moyen de filtrer quels contenus obtiennent de l’audio, et quand.
• Vous devez trouver l’équilibre entre l’expérience utilisateur (délai initial) et la maîtrise du budget.

TTS2Go combine la synthèse du navigateur et la synthèse vocale IA pour équilibrer qualité, coût et simplicité.

Principes clés :

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

• Vous ajoutez le SDK TTS2Go à votre site avec une clé d’API frontend.

Installez le paquet Svelte de TTS2Go :

npm install @tts2go/svelte

Le paquet fonctionne avec Svelte 5 et s’intègre naturellement au modèle de réactivité de Svelte.

Initialisez un client TTS2Go avec les identifiants de votre projet. Avec Svelte, vous pouvez créer le client directement dans un composant ou dans un module partagé.

import { createTTS2GoClient } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

• apiKey : votre clé TTS2Go publique, sans risque côté frontend.
• projectId : identifie le projet TTS2Go à utiliser pour la génération, les validations et les statistiques.

Utilisez createTTS pour obtenir un store réactif avec les commandes de lecture et l’état.

import { createTTS2GoClient, createTTS } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

const VOICE_ID = "your-voice-id";

const text = "Hello from TTS2Go in Svelte!";

const tts = createTTS(client, text, VOICE_ID);

let status = $state("idle");

const unsubscribe = tts.status.subscribe((s) => (status = s));

function handleClick() {

if (status === "playing" || status === "fallback") {

tts.stop();

} else {

tts.play();

}

À partir de là, vous pouvez :

• Explorer la sélection des voix pour l’adapter à votre marque ou à votre type de contenu.
• Utiliser SSML pour contrôler finement la prononciation, les pauses et l’accentuation.
• Intégrer l’API de surlignage du texte pour synchroniser le texte avec l’audio.

Pour la documentation Svelte complète et des exemples avancés, rendez-vous sur :

• https://tts2go.com/docs/svelte