Frontend

10 minutes

API Web Speech : donnons de la voix à nos applications web

Publié le 21 avril 2025

Intègre facilement la synthèse vocale à ton application web grâce à l'API Web Speech : transforme le texte en parole en quelques lignes de JavaScript.

Aujourd'hui, je te propose de découvrir l'API Web Speech, une fonctionnalité sous-exploitée de nos navigateurs. Cette interface JavaScript permet d’ajouter facilement des fonctionnalités vocales à tes applications web. Que ce soit pour donner de la voix à ton contenu ou offrir des commandes de contrôle vocale, elle ouvre de nouvelles possibilités d'interaction pour les utilisateurs !

Dans cet article, nous nous concentrerons sur la synthèse vocale : son intégration, ses cas d’usage les plus courants, ainsi que les défis et limitations à prendre en compte. Pour garder l’article digeste, la reconnaissance vocale sera abordée dans un futur article.

Alors, prêt à donner une nouvelle dimension à tes applications ?

L’API Web Speech : c’est quoi au juste ?

L'API Web Speech est un standard du W3C offrant deux fonctionnalités principales :

La synthèse vocale avec SpeechSynthesis.
La reconnaissance vocale avec SpeechRecognition.

La synthèse vocale permet de transformer du texte en parole avec différentes voix (selon la langue, le genre ou l'accent). Elle offre également des contrôles sur le pitch, la vitesse et le volume, ce qui permet d'adapter la dictée au contexte.

Quant à la reconnaissance vocale, elle permet de convertir la parole en texte en temps réel. Elle peut détecter plusieurs langues et est capable de distinguer des commandes vocales spécifiques, facilitant ainsi l'interaction avec l'utilisateur.

Bien qu’elle soit un standard, l’implémentation de cette API varie encore sensiblement selon les navigateurs. Nous verrons plus en détail ces différences au fil de l'article.

Mettre en place une synthèse vocale

Un Hello World vocal

Avant de commencer une précision s'impose, la plupart des navigateurs empêchent la lecture audio automatique sans interaction préalable. Il est donc essentiel d'utiliser les exemples suivants en réaction à une interaction utilisateur (un clic sur un bouton par exemple).

Pour commencer, nous devons créer une requête de vocalisation avec la classe SpeechSynthesisUtterance en lui passant le texte à synthétiser :

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

Il ne nous reste plus qu’à demander au navigateur de prononcer notre requête de synthèse :

speechSynthesis.speak(utterance);

Et voilà, ton navigateur vient de découvrir la parole ! Enfin… peut-être. Si tu fais ce test avec un navigateur basé sur Chromium, il est possible qu’il reste muet comme une tombe. Heureusement, il existe un contournement tout simple pour ce problème : il suffit de demander au navigateur d'annuler toute lecture en cours, même s'il n'y en a pas encore.

speechSynthesis.cancel();

Rassemblons tous les morceaux pour un exemple complet :

const trigger = document.getElementById("trigger");
trigger.addEventListener("click", () => {
    const utterance = new SpeechSynthesisUtterance("Hello World!");
    speechSynthesis.cancel();
    speechSynthesis.speak(utterance);
});

Personnaliser la synthèse vocale

L'objet SpeechSynthesisUtterance permet de personnaliser plusieurs aspects de la synthèse vocale selon tes besoins. Voici les paramètres qui peuvent être ajustés :

lang : langue de synthèse, au format BCP 47 (par exemple : fr-FR ou en-US).
pitch : hauteur de ton de la voix (entre 0.1 et 2).
rate : vitesse de lecture (entre 0.1 et 10).
volume : volume de lecture (entre 0 et 1).

Voici un exemple de configuration pour une voix espagnole, grave et avec une diction assez rapide :

const utterance = new SpeechSynthesisUtterance("Hola Mundo");
utterance.lang = "es-ES";
utterance.rate = 1.4;
utterance.pitch = 0.5
utterance.volume = 0.9;

Il existe également un ensemble d'événements pour réagir au cycle de vie d'une requête de synthétisation, comme start, end, ou encore error. Pour écouter ces événements, rien de bien compliqué :

utterance.addEventListener("end", () => {
    console.log("Utterance ended!");
});

Cependant, certains navigateurs basés sur Chromium peuvent parfois avoir du mal à déclencher correctement certains événements : cela peut notamment concerner l'événement end qui ne se déclenche pas systématiquement.

Choisir une voix manuellement

Un autre paramètre essentiel de la synthèse vocale est la voix. Chaque plateforme (navigateur / système) propose un ensemble de voix, incluant différents genres et accents selon les langues. Selon ton contexte, tu peux choisir la voix qui conviendra le mieux à l'expérience utilisateur que tu souhaites créer.

Pour récupérer l'ensemble des voix disponibles, il existe une méthode getVoices() sur l'objet speechSynthesis :

const voices = speechSynthesis.getVoices();

Attention : Chrome fait encore des siennes. En effet, contrairement à d'autres navigateurs, les voix ne sont pas disponibles dès le chargement de la page. Il est donc nécessaire d'attendre l'événement voiceschanged avant de pouvoir récupérer la liste des voix :

speechSynthesis.addEventListener("voiceschanged", () => {
    const voices = speechSynthesis.getVoices();
});

Maintenant que nous avons récupéré les voix, qu’allons-nous en faire ? C’est à toi de voir ! Tu peux par exemple :

Proposer à l’utilisateur de choisir sa voix préférée via une liste déroulante
Sélectionner automatiquement une voix en fonction de ses attributs (lang, name, localService)

Voici comment définir une voix à partir de la langue souhaitée :

    const voices = speechSynthesis.getVoices();
    const voice = voices.find(v => v.lang === 'fr-FR');

    const utterance = new SpeechSynthesisUtterance("Bonjour le monde");
    utterance.voice = voice ?? voices[0];

    speechSynthesis.cancel();
    speechSynthesis.speak(utterance);

Limitations et compatibilité

Bien que l'API Web Speech soit un outil puissant, il existe plusieurs limitations et différences de compatibilité à prendre en compte. Face à l'apparente facilité d’implémentation, intégrer une synthèse vocal fonctionnelle, de qualité et compatible sur de nombreux environnements soulève de nombreux défis.

Côté comptabilité, l'API SpeechSynthesis est bien lotie, elle est considérée comme Baseline Widely available : c'est à dire qu'elle est supportée par les versions les plus populaires des principaux navigateurs, ce qui n'est pas le cas de l'API SpeechRecognition (mais nous y reviendrons dans l'article dédié).

En termes de limitations, plusieurs points méritent d’être pris en compte :

Usage d’un serveur : la page web doit être servie via un serveur HTTP pour que les fonctionnalités vocales soient actives. Ce n’est pas un réel frein en production, mais c'est un point à garder en tête lors du développement local.
Disponibilité partielle en mode hors-ligne : la synthèse et la reconnaissance vocale reposent à la fois sur des ressources locales et des services distants. Certaines voix peuvent nécessiter une connexion internet. Dans un contexte où l’approche Offline First gagne en popularité, il est important d’anticiper les scénarios hors-ligne.
Différences d’implémentation : bien que cette API soit largement supportée, chaque navigateur a ses petites particularités. Par exemple, sur Chromium, il peut être nécessaire d’appeler cancel() avant speak() ou d’attendre l’événement voiceschanged pour accéder aux voix disponibles. Pour garantir une expérience cohérente, il faudra fournir un effort supplémentaire pour optimiser l'usage sur les différentes plateformes.
Qualité des voix variable selon les plateformes : la qualité et la variété des voix proposées diffèrent fortement d’un navigateur ou d’un système à l’autre. Sur Firefox, par exemple, les voix peuvent paraître bien plus robotiques que sur Chrome.

Perspectives d'intégration

Tu as peut-être déjà en tête des idées d’intégration pour la synthèse vocale, mais si ce n’est pas encore le cas, voici quelques exemples concrets d’usages :

Offrir un guidage vocal à l’utilisateur lorsqu’il ne peut pas consulter l’écran (navigation GPS, tutoriels interactifs…).
Proposer une accessibilité renforcée pour les personnes malvoyantes ou ayant des difficultés de lecture.
Ajouter une dimension plus immersive à des jeux ou expériences interactives en ligne.
Annoncer à voix haute des notifications ou alertes importantes.
Intégrer de la dictée vocale dans des applications éducatives.

Conclusion

L’API Web Speech offre de nouvelles perspectives fonctionnelles pour enrichir l'expérience utilisateur en rendant tes applications plus interactives et accessibles. Malgré quelques limitations et subtilités d’implémentation, son intégration reste très accessible.

Cela dit, selon moi, deux freins subsistent à une adoption généralisée :

La qualité parfois décevante des voix sur certains navigateurs,
Le fait que de nombreuses voix reposent sur des services tiers, ce qui peut soulever des problématiques de connectivité ou de confidentialité selon les usages.

Cet article ne présente qu'une partie des super-pouvoirs de cette API. Dans le prochain article, nous explorerons l’autre versant : la reconnaissance vocale, pour transformer la voix en actions concrètes !

A bientôt sur ce blog ou en live sur Twitch 👋