L’API Web Speech, accessible en Javascript, offre un ensemble d’outils puissants pour intégrer la reconnaissance vocale et la synthèse vocale dans vos applications web. Cette technologie ouvre de nouvelles perspectives pour l’interaction homme-machine, l’accessibilité et l’innovation web.
L’API Web Speech se compose de deux interfaces principales :
- SpeechRecognition : permet la reconnaissance vocale en temps réel, transformant la parole de l’utilisateur en texte.
- SpeechSynthesis : offre la fonctionnalité de synthèse vocale, convertissant du texte en parole audible. Ce que nous allons découvrir dans ce tutoriel.
API Web-speech
Favorisez l’accessibilité de votre site web avec la lecture audio du contenu. Cette fonctionnalité permet à votre site web de générer de la parole à partir de texte écrit.
Explorer les possibilités
- Dictée vocale : Dictez du texte directement dans des champs de saisie, emails ou documents, pour une saisie plus rapide et accessible.
- Commandes vocales : Contrôlez des applications web, naviguez dans des menus et lancez des actions par la simple voix, pour une interaction intuitive.
- Services d'accessibilité : Offrez une navigation web plus inclusive aux personnes ayant des difficultés motrices ou visuelles, en leur permettant d'interagir par la voix.
- Interfaces vocales créatives : Développez des jeux, des assistants virtuels ou des outils éducatifs interactifs, enrichis par la reconnaissance et la synthèse vocale.
Utilisation de l'API Web Speech pour la lecture audio de contenu
On commence par mettre en place la structure HTML :
<p id="txt" class="txt">Favorisez l'accessibilité de votre site web avec la lecture audio du contenu. Cette fonctionnalité permet aux sites web de générer de la parole à partir de texte écrit. Cela peut être utile pour les utilisateurs malvoyants ou pour créer des descriptions audio de contenu.</p>
<form>
<select></select>
<div class="controls">
<button id="play" type="submit">Play</button>
</div>
</form>Initialisation de l'API Web Speech en javascript
synth est une instance de window.speechSynthesis, qui est l'interface principale pour utiliser la synthèse vocale dans le navigateur.
const synth = window.speechSynthesis;Sélection des éléments HTML
inputForm sélectionne l'élément <form> du document HTML. inputTxt sélectionne l'élément avec la classe .txt. voiceSelect sélectionne l'élément <select> qui contiendra les différentes options de voix disponibles pour la synthèse vocale.
const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");La liste des voix disponible
voices est un tableau qui contiendra toutes les voix disponibles.
populateVoiceList est une fonction qui récupère les voix disponibles via synth.getVoices(), les trie par nom, et remplit le menu déroulant voiceSelect avec ces voix.
La fonction sort trie les voix par ordre alphabétique. La boucle for crée une option pour chaque voix et la place dans le menu déroulant.
let voices = [];
function populateVoiceList() {
voices = synth.getVoices().sort(function (a, b) {
const aname = a.name.toUpperCase();
const bname = b.name.toUpperCase();
if (aname < bname) {
return -1;
} else if (aname == bname) {
return 0;
} else {
return +1;
}
});
const selectedIndex =
voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
voiceSelect.innerHTML = "";
for (let i = 0; i < voices.length; i++) {
const option = document.createElement("option");
option.textContent = `${voices[i].name} (${voices[i].lang})`;
if (voices[i].default) {
option.textContent += " -- DEFAULT";
}
option.setAttribute("data-lang", voices[i].lang);
option.setAttribute("data-name", voices[i].name);
voiceSelect.appendChild(option);
}
voiceSelect.selectedIndex = selectedIndex;
}Mise à jour des voix disponibles
populateVoiceList est appelée une première fois pour remplir initialement le menu déroulant.
speechSynthesis.onvoiceschanged est un événement qui se déclenche lorsque la liste des voix change. On assigne populateVoiceList à cet événement pour mettre à jour la liste des voix si nécessaire.
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}Fonction de synthèse vocale
speak est une fonction qui réalise la synthèse vocale du texte entré par l'utilisateur. Elle vérifie si le synthétiseur est déjà en train de parler synth.speaking et, si c'est le cas, arrête l'exécution.
Si le texte n'est pas vide, elle crée une instance de SpeechSynthesisUtterance avec le texte à synthétiser. utterThis.onend et utterThis.onerror sont des gestionnaires d'événements qui se déclenchent à la fin de la synthèse ou en cas d'erreur.
selectedOption récupère le nom de la voix sélectionnée dans le menu déroulant. La boucle for assigne la voix sélectionnée à l'instance utterThis.
Les propriétés pitch (intonation) et rate (vitesse) de utterThis sont définies sur 1. Enfin, synth.speak(utterThis) déclenche la synthèse vocale.
function speak() {
if (synth.speaking) {
console.error("speechSynthesis.speaking");
return;
}
if (inputTxt.textContent !== "") {
const utterThis = new SpeechSynthesisUtterance(inputTxt.textContent);
utterThis.onend = function (event) {
console.log("SpeechSynthesisUtterance.onend");
};
utterThis.onerror = function (event) {
console.error("SpeechSynthesisUtterance.onerror");
};
const selectedOption =
voiceSelect.selectedOptions[0].getAttribute("data-name");
for (let i = 0; i < voices.length; i++) {
if (voices[i].name === selectedOption) {
utterThis.voice = voices[i];
break;
}
}
utterThis.pitch = 1;
utterThis.rate = 1;
synth.speak(utterThis);
}
}Lancement de la lecture
Lorsque le formulaire est soumis inputForm.onsubmit, la fonction speak est appelée. event.preventDefault() empêche l'action par défaut du formulaire (soumission et rechargement de la page).
inputForm.onsubmit = function (event) {
event.preventDefault();
speak();
};Code final pour la lecture audio du contenu avec l'API Web Speech
const synth = window.speechSynthesis;
const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
let voices = [];
function populateVoiceList() {
voices = synth.getVoices().sort(function (a, b) {
const aname = a.name.toUpperCase();
const bname = b.name.toUpperCase();
if (aname < bname) {
return -1;
} else if (aname == bname) {
return 0;
} else {
return +1;
}
});
// Initialiser selectedIndex avec 0 ou l'index sélectionné
let selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
voiceSelect.innerHTML = "";
for (let i = 0; i < voices.length; i++) {
const option = document.createElement("option");
option.textContent = `${voices[i].name} (${voices[i].lang})`;
if (voices[i].default) {
option.textContent += " -- DEFAULT";
}
option.setAttribute("data-lang", voices[i].lang);
option.setAttribute("data-name", voices[i].name);
voiceSelect.appendChild(option);
// Mettre à jour selectedIndex si la voix est "Amélie"
if (voices[i].name === "Amélie") {
selectedIndex = i;
}
}
// Appliquer selectedIndex
voiceSelect.selectedIndex = selectedIndex;
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
function speak() {
if (synth.speaking) {
console.error("speechSynthesis.speaking");
return;
}
if (inputTxt.textContent !== "") {
const utterThis = new SpeechSynthesisUtterance(inputTxt.textContent);
utterThis.onend = function (event) {
console.log("SpeechSynthesisUtterance.onend");
};
utterThis.onerror = function (event) {
console.error("SpeechSynthesisUtterance.onerror");
};
const selectedOption =
voiceSelect.selectedOptions[0].getAttribute("data-name");
for (let i = 0; i < voices.length; i++) {
if (voices[i].name === selectedOption) {
utterThis.voice = voices[i];
break;
}
}
utterThis.pitch = 1;
utterThis.rate = 1;
synth.speak(utterThis);
}
}
inputForm.onsubmit = function (event) {
event.preventDefault();
speak();
};Ce code crée une interface utilisateur simple permettant de convertir du texte en parole à l'aide de l'API Web Speech. L'utilisateur peut choisir parmi les différentes voix disponibles dans le navigateur, saisir du texte, et cliquer sur un bouton pour entendre la synthèse vocale.
