Simplifiez l’intégration de la synthèse vocale en français avec l’API Web Speech

Posté le Mis à jour le par Teddy Kishi
Temps de lecture : 3 minutes
A female doctor using a laptop for an online consultation, wearing a headset in a bright office.
Écouter cet article

Introduction

La synthèse vocale est une technologie qui convertit du texte en parole, offrant ainsi des possibilités intéressantes pour améliorer l’accessibilité et l’interactivité des sites web. Grâce à l’API Web Speech, il est désormais possible d’intégrer cette fonctionnalité directement dans vos applications web sans dépendre de services externes. Dans cet article, nous vous guiderons pas à pas pour mettre en place une synthèse vocale en français qui prononce « Bonjour… » dès le chargement de la page.

Qu’est-ce que l’API Web Speech ?

L’API Web Speech est une interface JavaScript qui permet aux développeurs d’intégrer des fonctionnalités de reconnaissance et de synthèse vocale dans leurs applications web. Elle se compose de deux principales interfaces :

  • SpeechRecognition : pour la reconnaissance vocale, transformant la parole en texte.
  • SpeechSynthesis : pour la synthèse vocale, convertissant le texte en parole.

Dans notre cas, nous nous concentrerons sur l’interface SpeechSynthesis pour faire parler notre page web.

Implémentation de la synthèse vocale en français

Pour que votre page web utilise par défaut la synthèse vocale en français et prononce « Bonjour tout le monde ! » au chargement, suivez les étapes ci-dessous :

  1. Vérifier la compatibilité du navigateur : Assurez-vous que le navigateur de l’utilisateur prend en charge l’API Web Speech.
  2. Obtenir la liste des voix disponibles : Récupérez les voix de synthèse vocale disponibles sur le navigateur.
  3. Sélectionner la voix française : Choisissez la voix correspondant au français (fr-FR).
  4. Créer une instance de SpeechSynthesisUtterance : Cette instance contiendra le texte à prononcer.
  5. Associer la voix sélectionnée à l’instance : Attribuez la voix française à l’instance créée.
  6. Prononcer le texte : Utilisez la méthode speak de l’interface SpeechSynthesis pour lire le texte.

Voici un exemple de code illustrant ces étapes :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Synthèse vocale en français</title>
</head>
<body>
    <script>
        // Fonction pour vérifier si la synthèse vocale est supportée
        function estSyntheseVocaleSupportee() {
            return 'speechSynthesis' in window;
        }

        // Fonction pour obtenir la voix française par défaut
        function obtenirVoixFrancaise() {
            const voixDisponibles = window.speechSynthesis.getVoices();
            return voixDisponibles.find(voix => voix.lang === 'fr-FR') || voixDisponibles[0];
        }

        // Fonction pour prononcer un message avec la voix spécifiée
        function prononcerMessage(message, voix) {
            const utterance = new SpeechSynthesisUtterance(message);
            utterance.voice = voix;
            window.speechSynthesis.speak(utterance);
        }

        // Exécution au chargement de la page
        window.addEventListener('load', () => {
            if (estSyntheseVocaleSupportee()) {
                // Chargement des voix peut être asynchrone
                window.speechSynthesis.onvoiceschanged = () => {
                    const voixFrancaise = obtenirVoixFrancaise();
                    prononcerMessage("Bonjour tout le monde !", voixFrancaise);
                };
            } else {
                console.error("La synthèse vocale n'est pas supportée par ce navigateur.");
            }
        });
    </script>
</body>
</html>

Explications du code :

  • Vérification du support : La fonction estSyntheseVocaleSupportee s’assure que le navigateur supporte la synthèse vocale.
  • Obtention de la voix française : La fonction obtenirVoixFrancaise parcourt les voix disponibles et sélectionne celle en français.
  • Prononciation du message : La fonction prononcerMessage crée une instance de SpeechSynthesisUtterance avec le message à prononcer et la voix sélectionnée, puis utilise speechSynthesis.speak pour lire le message.
  • Chargement des voix : Les voix étant chargées de manière asynchrone, l’événement onvoiceschanged est utilisé pour s’assurer que la voix française est disponible avant de prononcer le message.

Compatibilité des navigateurs

L’API Web Speech est largement supportée dans les navigateurs modernes tels que Chrome, Firefox et Safari. Cependant, il est recommandé de vérifier la compatibilité pour les navigateurs spécifiques que vous ciblez.

Bonnes pratiques et améliorations possibles

Pour enrichir l’expérience utilisateur, vous pouvez envisager les améliorations suivantes :

  • Gestion des erreurs : Informer l’utilisateur si la synthèse vocale n’est pas supportée ou si aucune voix française n’est disponible.
  • Personnalisation : Permettre à l’utilisateur de choisir parmi différentes voix ou de modifier le message à prononcer.
  • Accessibilité : S’assurer que la synthèse vocale n’interfère pas avec les technologies d’assistance, comme les lecteurs d’écran, en fournissant des contrôles pour activer ou désactiver la lecture automatique.

L’intégration de la synthèse vocale en français dans vos applications web est désormais à portée de main grâce à l’API Web Speech. En suivant les étapes décrites ci-dessus, vous pouvez offrir une expérience utilisateur plus riche et accessible, tout en simplifiant le processus de développement. N’hésitez pas à explorer davantage les fonctionnalités de cette API pour adapter votre application aux besoins spécifiques de votre audience.

Pour approfondir vos connaissances, vous pouvez consulter la documentation officielle de l’API Web Speech sur MDN Web Docs.

Partager