La nouvelle API Web Speech JavaScript permet d'ajouter facilement la reconnaissance vocale à vos pages Web. Cette API offre un contrôle précis et une grande flexibilité sur les fonctionnalités de reconnaissance vocale de Chrome 25 et versions ultérieures. Dans l'exemple ci-dessous, le texte reconnu s'affiche presque immédiatement lorsque vous parlez.
Penchons-nous sur le fonctionnement de l'application. Tout d'abord, nous vérifions si le navigateur est compatible avec l'API Web Speech en vérifiant si l'objet webkitSpeechRecognition existe. Si ce n'est pas le cas, nous suggérons à l'utilisateur de mettre à niveau son navigateur. Étant donné que l'API en est encore au stade expérimental, elle utilise actuellement le préfixe du fournisseur. Enfin, nous créons l'objet webkitSpeechRecognition qui fournit l'interface vocale, et nous définissons certains de ses attributs et gestionnaires d'événements.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
La valeur par défaut de continuous est "false", ce qui signifie que lorsque l'utilisateur arrête de parler, la reconnaissance vocale s'arrête. Ce mode est idéal pour les textes simples, comme les champs de saisie courts. Dans cette démonstration, nous l'avons définie sur "true", de sorte que la reconnaissance continue même si l'utilisateur arrête de parler.
La valeur par défaut de interimResults est "false", ce qui signifie que les seuls résultats renvoyés par l'outil de reconnaissance sont finaux et ne seront pas modifiés. La démo définit la valeur sur "true" afin d'obtenir rapidement des résultats provisoires susceptibles de changer. Regardez attentivement la démonstration. Le texte en gris est provisoire et peut parfois changer, tandis que le texte en noir correspond aux réponses de l'outil de reconnaissance, qui sont marquées comme définitives et ne changent pas.
Pour commencer, l'utilisateur clique sur le bouton du micro, ce qui déclenche ce code:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Nous avons défini la langue parlée pour l'outil de reconnaissance vocale "lang". à la valeur BCP-47 sélectionnée par l'utilisateur dans la liste déroulante de sélection, par exemple "en-US" pour l'anglais des États-Unis. Si cette valeur n'est pas définie, la langue par défaut est la langue de l'élément racine et de la hiérarchie du document HTML. La reconnaissance vocale de Chrome prend en charge de nombreuses langues (voir le tableau "langs" dans la source de la démo), ainsi que certaines langues qui s'écrivent de droite à gauche qui ne sont pas incluses dans cette démo, telles que he-IL et ar-EG.
Après avoir défini la langue, nous appelons recognition.start() pour activer la reconnaissance vocale. Une fois qu'il commence à enregistrer du contenu audio, il appelle le gestionnaire d'événements onstart, puis, pour chaque nouvel ensemble de résultats, le gestionnaire d'événements onresult.
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
Ce gestionnaire concatène tous les résultats reçus jusqu'à présent en deux chaînes: final_transcript et interim_transcript. Les chaînes résultantes peuvent inclure "\n", par exemple lorsque l'utilisateur prononce "nouveau paragraphe". Nous utilisons donc la fonction linebreak pour les convertir en balises HTML <br> ou <p>. Enfin, il définit ces chaînes en tant que innerHTML de leurs éléments <span> correspondants: final_span, dont le style est stylisé avec du texte noir, et interim_span, qui est stylisé avec du texte en gris.
interim_transcript est une variable locale. Elle est entièrement recréée chaque fois que cet événement est appelé, car il est possible que tous les résultats intermédiaires aient été modifiés depuis le dernier événement onresult. Nous pourrions faire de même pour final_transcript en démarrant simplement la boucle For à 0. Toutefois, comme le texte final ne change jamais, nous avons amélioré l'efficacité du code ici en rendant final_transcript global, afin que cet événement puisse démarrer la boucle For à event.resultIndex et n'ajouter que le nouveau texte final.
Et voilà ! Le reste du code sert uniquement à rendre tout ce qui est joli. Il maintient l'état, présente à l'utilisateur des messages d'information et remplace l'image GIF du bouton du micro entre le micro statique, l'image du micro barré et l'animation du micro avec le point rouge clignotant.
L'image de la barre oblique du micro est affichée lorsque recognition.start() est appelé, puis remplacée par mic-animate lorsque onstart se déclenche. En règle générale, cela se produit si rapidement que la barre oblique est invisible. Toutefois, lors de la première utilisation de la reconnaissance vocale, Chrome doit demander à l'utilisateur l'autorisation d'utiliser le micro. Dans ce cas, onstart ne se déclenche que lorsque l'utilisateur accorde cette autorisation. Les pages hébergées sur HTTPS n'ont pas besoin de demander l'autorisation à plusieurs reprises, contrairement aux pages hébergées sur HTTP.
Vous devez donc donner vie à vos pages Web en leur permettant d'écouter vos utilisateurs !
Votre avis nous intéresse...
- Pour les commentaires sur la spécification de l'API Web Speech du W3C: e-mail, archive de diffusion, groupe de la communauté
- Pour commenter l'implémentation de cette spécification dans Chrome: e-mail, archive de diffusion
Consultez le livre blanc sur la confidentialité dans Chrome pour découvrir comment Google gère les données vocales à partir de cette API.