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 :
- Vérifier la compatibilité du navigateur : Assurez-vous que le navigateur de l’utilisateur prend en charge l’API Web Speech.
- Obtenir la liste des voix disponibles : Récupérez les voix de synthèse vocale disponibles sur le navigateur.
- Sélectionner la voix française : Choisissez la voix correspondant au français (fr-FR).
- Créer une instance de SpeechSynthesisUtterance : Cette instance contiendra le texte à prononcer.
- Associer la voix sélectionnée à l’instance : Attribuez la voix française à l’instance créée.
- Prononcer le texte : Utilisez la méthode
speakde 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
estSyntheseVocaleSupportees’assure que le navigateur supporte la synthèse vocale. - Obtention de la voix française : La fonction
obtenirVoixFrancaiseparcourt les voix disponibles et sélectionne celle en français. - Prononciation du message : La fonction
prononcerMessagecrée une instance deSpeechSynthesisUtteranceavec le message à prononcer et la voix sélectionnée, puis utilisespeechSynthesis.speakpour lire le message. - Chargement des voix : Les voix étant chargées de manière asynchrone, l’événement
onvoiceschangedest 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.
