L'API Speech Synthesis est une API géniale, idéale pour expérimenter de nouveaux types d'interfaces et laisser le navigateur vous parler
L'API de synthèse vocale est un outil génial fourni par les navigateurs modernes.
Introduit en 2014, il est maintenantlargement adoptéeet disponible dans Chrome, Firefox, Safari et Edge. IE n'est pas pris en charge.
Il fait partie de l'API Web Speech, avec leAPI de reconnaissance vocale, bien que cela ne soit actuellement pris en charge, en mode expérimental, que sur Chrome.
Je l'ai utilisé récemment pour fournir une alerte sur une page qui surveillait certains paramètres. Lorsque l'un des chiffres a augmenté, j'ai été alerté par les haut-parleurs de l'ordinateur.
Commencer
L'exemple le plus simple d'utilisation duAPI de synthèse vocalereste sur une seule ligne:
speechSynthesis.speak(new SpeechSynthesisUtterance('Hey'))
Copiez-le et collez-le dans la console de votre navigateur, et votre ordinateur devrait parler!
L'API
L'API expose plusieurs objets auwindow
objet.
SpeechSynthesisUtterance
SpeechSynthesisUtterance
représente une demande de parole. Dans l'exemple ci-dessus, nous lui avons passé une chaîne. C'est le message que le navigateur doit lire à haute voix.
Une fois que vous avez obtenu l'objet d'énoncé, vous pouvez effectuer quelques ajustements pour modifier les propriétés vocales:
const utterance = new SpeechSynthesisUtterance('Hey')
utterance.rate
: règle la vitesse, accepte entre [0,1 - 10], la valeur par défaut est 1utterance.pitch
: règle la hauteur, accepte entre [0 - 2], la valeur par défaut est 1utterance.volume
: règle le volume, accepte entre [0 - 1], la valeur par défaut est 1utterance.lang
: définissez la langue (les valeurs utilisent une balise de langue BCP 47, commeen-US
ouit-IT
)utterance.text
: au lieu de le définir dans le constructeur, vous pouvez le passer en tant que propriété. Le texte peut comporter au maximum 32767 caractèresutterance.voice
: définit la voix (plus à ce sujet ci-dessous)
Exemple:
const utterance = new SpeechSynthesisUtterance('Hey')
utterance.pitch = 1.5
utterance.volume = 0.5
utterance.rate = 8
speechSynthesis.speak(utterance)
Définir une voix
Le navigateur a un nombre différent de voix disponibles.
Pour voir la liste, utilisez ce code:
console.log(`Voices #: ${speechSynthesis.getVoices().length}`)
speechSynthesis.getVoices().forEach(voice => {
console.log(voice.name, voice.lang)
})
Voici l'un des problèmes liés à plusieurs navigateurs. Le code ci-dessus fonctionne dans Firefox, Safari (et peut-être Edge mais je ne l'ai pas testé), maisne fonctionne pas dans Chrome. Chrome nécessite la gestion des voix d'une manière différente et nécessite un rappel qui est appelé lorsque les voix ont été chargées:
const voiceschanged = () => {
console.log(`Voices #: ${speechSynthesis.getVoices().length}`)
speechSynthesis.getVoices().forEach(voice => {
console.log(voice.name, voice.lang)
})
}
speechSynthesis.onvoiceschanged = voiceschanged
Une fois le rappel appelé, nous pouvons accéder à la liste en utilisantspeechSynthesis.getVoices()
.
Je pense que c'est parce que Chrome - s'il y a une connexion réseau - vérifie les langues supplémentaires des serveurs Google:
S'il n'y a pas de connexion réseau, le nombre de langues disponibles est le même que Firefox et Safari. Les langues supplémentaires sont disponibles là où le réseau est activé, mais l'API fonctionne également hors ligne.
Implémentation de plusieurs navigateurs pour obtenir la langue
Puisque nous avons cette différence, nous avons besoin d'un moyen de l'abstraire pour utiliser l'API. Cet exemple fait cette abstraction:
const getVoices = () => {
return new Promise(resolve => {
let voices = speechSynthesis.getVoices()
if (voices.length) {
resolve(voices)
return
}
speechSynthesis.onvoiceschanged = () => {
voices = speechSynthesis.getVoices()
resolve(voices)
}
})
}
const printVoicesList = async () => {
;(await getVoices()).forEach(voice => {
console.log(voice.name, voice.lang)
})
}
printVoicesList()
Utilisez une langue personnalisée
La voix par défaut parle en anglais.
Vous pouvez utiliser la langue de votre choix, en définissant l'énoncélang
biens:
let utterance = new SpeechSynthesisUtterance('Ciao')
utterance.lang = 'it-IT'
speechSynthesis.speak(utterance)
Utiliser une autre voix
S'il y a plus d'une voix disponible, vous pouvez choisir l'autre. Par exemple, la voix italienne par défaut est féminine, mais peut-être que je veux une voix masculine. C'est le deuxième que nous obtenons de la liste des voix.
const lang = 'it-IT'
const voiceIndex = 1
const speak = async text => {
if (!speechSynthesis) {
return
}
const message = new SpeechSynthesisUtterance(text)
message.voice = await chooseVoice()
speechSynthesis.speak(message)
}
const getVoices = () => {
return new Promise(resolve => {
let voices = speechSynthesis.getVoices()
if (voices.length) {
resolve(voices)
return
}
speechSynthesis.onvoiceschanged = () => {
voices = speechSynthesis.getVoices()
resolve(voices)
}
})
}
const chooseVoice = async () => {
const voices = (await getVoices()).filter(voice => voice.lang == lang)
return new Promise(resolve => {
resolve(voices[voiceIndex])
})
}
speak(‘Ciao’)
Valeurs pour la langue
Voici quelques exemples de langues que vous pouvez utiliser:
- Arabe (Arabie Saoudite) ➡️
ar-SA
- Chinois (Chine) ➡️
zh-CN
- Chinois (RAS de Hong Kong Chine) ➡️
zh-HK
- Chinois (Taiwan) ➡️
zh-TW
- Tchèque (République tchèque) ➡️
cs-CZ
- Danois (Danemark) ➡️
da-DK
- Néerlandais (Belgique) ➡️
nl-BE
- Néerlandais (Pays-Bas) ➡️
nl-NL
- Anglais (Australie) ➡️
en-AU
- Anglais (Irlande) ➡️
en-IE
- Anglais (Afrique du Sud) ➡️
en-ZA
- Anglais (Royaume-Uni) ➡️
en-GB
- Anglais (États-Unis) ➡️
en-US
- Finnois (Finlande) ➡️
fi-FI
- Français (Canada) ➡️
fr-CA
- Français (France) ➡️
fr-FR
- Allemand (Allemagne) ➡️
de-DE
- Grec (Grèce) ➡️
el-GR
- Hindi (Inde) ➡️
hi-IN
- Hongrois (Hongrie) ➡️
hu-HU
- Indonésien (Indonésie) ➡️
id-ID
- Italien (Italie) ➡️
it-IT
- Japonais (Japon) ➡️
ja-JP
- Coréen (Corée du Sud) ➡️
ko-KR
- Norvégien (Norvège) ➡️
no-NO
- Polonais (Pologne) ➡️
pl-PL
- Portugais (Brésil) ➡️
pt-BR
- Portugais (Portugal) ➡️
pt-PT
- Roumain (Roumanie) ➡️
ro-RO
- Russe (Russie) ➡️
ru-RU
- Slovaque (Slovaquie) ➡️
sk-SK
- Espagnol (Mexique) ➡️
es-MX
- Espagnol (Espagne) ➡️
es-ES
- Suédois (Suède) ➡️
sv-SE
- Thaï (Thaïlande) ➡️
th-TH
- Turc (Turquie) ➡️
tr-TR
Mobile
Sur iOS, l'API fonctionne mais doit être déclenchée par un rappel d'action de l'utilisateur, comme une réponse à un événement tap, pour offrir une meilleure expérience aux utilisateurs et éviter les sons inattendus de votre téléphone.
Vous ne pouvez pas faire comme sur le bureau où vous pouvez faire en sorte que vos pages Web parlent à l'improviste.
Téléchargez mon gratuitManuel du débutant JavaScript
Plus de didacticiels sur le navigateur:
- Quelques astuces utiles disponibles en HTML5
- Comment j'ai fait fonctionner un site Web basé sur un CMS hors ligne
- Le guide complet des applications Web progressives
- L'API Fetch
- Le guide de l'API Push
- L'API Channel Messaging
- Tutoriel pour les techniciens de service
- Le guide de l'API Cache
- Le guide de l'API de notification
- Plongez dans IndexedDB
- L'API Selectors: querySelector et querySelectorAll
- Chargez efficacement JavaScript avec différé et asynchrone
- Le modèle d'objet de document (DOM)
- L'API Web Storage: stockage local et stockage de session
- Découvrez comment fonctionnent les cookies HTTP
- L'API History
- Le format d'image WebP
- XMLHttpRequest (XHR)
- Un tutoriel SVG approfondi
- Que sont les URL de données
- Feuille de route pour apprendre la plate-forme Web
- CORS, partage de ressources inter-origines
- Travailleurs Web
- Le guide requestAnimationFrame ()
- Quel est le Doctype
- Utilisation de la console DevTools et de l'API de la console
- L'API de synthèse vocale
- Comment attendre l'événement DOM ready en JavaScript brut
- Comment ajouter une classe à un élément DOM
- Comment faire une boucle sur des éléments DOM à partir de querySelectorAll
- Comment supprimer une classe d'un élément DOM
- Comment vérifier si un élément DOM a une classe
- Comment modifier la valeur d'un nœud DOM
- Comment ajouter un événement de clic à une liste d'éléments DOM renvoyés par querySelectorAll
- WebRTC, l'API Web en temps réel
- Comment obtenir la position de défilement d'un élément en JavaScript
- Comment remplacer un élément DOM
- Comment accepter uniquement les images dans un champ de fichier d'entrée
- Pourquoi utiliser une version préliminaire d'un navigateur?
- L'objet Blob
- L'objet fichier
- L'objet FileReader
- L'objet FileList
- ArrayBuffer
- ArrayBufferView
- L'objet URL
- Tableaux typés
- L'objet DataView
- L'API BroadcastChannel
- L'API Streams
- L'objet FormData
- L'objet Navigateur
- Comment utiliser l'API de géolocalisation
- Comment utiliser getUserMedia ()
- Comment utiliser l'API Drag and Drop
- Comment travailler avec le défilement sur les pages Web
- Gestion des formulaires en JavaScript
- Événements de clavier
- Événements de souris
- Événements tactiles
- Comment supprimer tous les enfants d'un élément DOM
- Comment créer un attribut HTML à l'aide de JavaScript vanille
- Comment vérifier si une case est cochée à l'aide de JavaScript?
- Comment copier dans le presse-papiers à l'aide de JavaScript
- Comment désactiver un bouton à l'aide de JavaScript
- Comment rendre une page modifiable dans le navigateur
- Comment obtenir des valeurs de chaîne de requête en JavaScript avec URLSearchParams
- Comment supprimer tous les CSS d'une page à la fois
- Comment utiliser insertAdjacentHTML
- Safari, prévenez avant de quitter
- Comment ajouter une image au DOM en utilisant JavaScript
- Comment réinitialiser un formulaire
- Comment utiliser Google Fonts