Window : propriété speechSynthesis
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2018.
La propriété en lecture seule speechSynthesis de l'interface Window retourne un objet SpeechSynthesis, qui est le point d'entrée pour utiliser la fonctionnalité de synthèse vocale de l'API Web Speech.
Valeur
Un objet SpeechSynthesis.
Exemples
Dans notre démonstration de synthétiseur vocal (angl.), nous commençons par obtenir une référence au contrôleur SpeechSynthesis en utilisant window.speechSynthesis.
Après avoir défini certaines variables nécessaires, nous récupérons une liste des voix disponibles en utilisant SpeechSynthesis.getVoices() et remplissons un menu de sélection avec celles-ci afin que l'utilisateur·ice puisse choisir la voix qu'il souhaite.
Dans le gestionnaire inputForm.onsubmit, nous empêchons l'envoi du formulaire avec preventDefault(), créons une nouvelle instance de SpeechSynthesisUtterance contenant le texte de l'élément <input>, définissons la voix de l'énoncé sur la voix sélectionnée dans l'élément <select> et commençons à faire parler l'énoncé par la méthode SpeechSynthesis.speak().
const synthese = window.speechSynthesis;
const formEntree = document.querySelector("form");
const texteEntree = document.querySelector("input");
const selecteurVoix = document.querySelector("select");
function remplirListeVoix() {
const voix = synthese.getVoices();
for (const voixActuelle of voix) {
const option = document.createElement("option");
option.textContent = `${voixActuelle.name} (${voixActuelle.lang})`;
if (voixActuelle.default) {
option.textContent += " — DEFAULT";
}
option.setAttribute("data-lang", voixActuelle.lang);
option.setAttribute("data-name", voixActuelle.name);
selecteurVoix.appendChild(option);
}
}
remplirListeVoix();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = remplirListeVoix;
}
formEntree.onsubmit = (event) => {
event.preventDefault();
const utterThis = new SpeechSynthesisUtterance(texteEntree.value);
const optionSelectionnee =
selecteurVoix.selectedOptions[0].getAttribute("data-name");
utterThis.voice = voix.find((v) => v.name === optionSelectionnee);
synthese.speak(utterThis);
texteEntree.blur();
};
Spécifications
| Spécification |
|---|
| Web Speech API # tts-section |