Speech Synthesis API : Démo HTML5
Mise à jour : 2017-01-22
The SpeechSynthesis Interface
- SpeechSynthesis :
- Attributs :
- paused : synthèse vocale en pause.
- pending : synthèse vocale en attente.
- speaking : synthèse vocale en cours.
- Méthodes :
- cancel : arrête la synthèse vocale.
- paused : pause la synthèse vocale.
- resume : redémarre la synthèse vocale.
- speak : énonce le texte.
- getVoices : retourne les voix disponibles dans le navigateur.
- SpeechSynthesisVoiceList :
- item : liste des voix.
- length : nombre de voix.
- SpeechSynthesisVoice :
- default : vrai pour la voix par défaut (1 par langue, dépendante du navigateur).
- lang : langue au format BCP 47 (ex. fr-FR).
- localService : vrai pour une synthèse vocale en locale (utile en mobilité).
- name : nom de la voix.
- voiceURI : URI de la voix.
- SpeechSynthesisVoiceList :
- Attributs :
- SpeechSynthesisUtterance :
- Attributs :
- lang : langue au format BCP 47 (ex. fr-FR).
- pitch : ton dans l'interval [0, 2] (1 par défaut).
- rate : débit (1 par défaut).
- text : texte à énoncer.
- voiceURI : URI de la voix.
- volume : volume dans l'interval [0, 1] (1 par défaut).
- Évènements :
- boundary : envoyé lorsqu'une limite est atteinte.
- end : envoyé à la fin sans erreur de l'énonciation.
- error : envoyé si une erreur survient.
- mark : envoyé si un marqueur est rencontré dans un texte au format SSML.
- pause : envoyé lorsque l'énonciation est en pause.
- resume : envoyé lorsque l'énonciation redémarre.
- start : envoyé lorsque l'énonciation démarre.
- Attributs :
- charIndex : position dans la chaîne de caractères énoncée.
- elapsedTime : temps écolué depuis le début de l'énonciation.
- name : nom du marqueur rencontré.
- Attributs :
Notes sur le tuto
- Contrairement à ce qu'on peut lire sur le Web, Firefox supporte cet API par défaut.
- Démo avec quelques réglages : Code Pen
- Articles détaillés :
- Voir aussi : Speech Recognition API
Exemple de code HTML5
Montez le son et rechargez la page <button onclick="location.reload()">Reload (F5)</button> <script> ssu = new SpeechSynthesisUtterance() ssu.lang = "fr-FR" ssu.text = "Bonjour, bienvenue sur HTML5 démo." speechSynthesis.speak(ssu) </script>
Démonstration du résultat HTML5
Montez le son et rechargez la page
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isItemSupported("window.speechSynthesis") isItemSupported("window.SpeechSynthesisUtterance") </script>