La nouvelle API Web Speech JavaScript permet d'ajouter facilement la reconnaissance vocale à vos pages Web. Cette API permet de contrôler avec précision et de manière flexible les fonctionnalités de reconnaissance vocale dans Chrome 25 et versions ultérieures. Voici un exemple où le texte reconnu s'affiche presque immédiatement pendant que vous parlez.
Voyons ce qui se passe sous le capot. 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 est encore expérimentale, elle est actuellement préfixée par le fournisseur.) Enfin, nous créons l'objet webkitSpeechRecognition qui fournit l'interface vocale, et définissons certains de ses attributs et de ses 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 cesse de parler, la reconnaissance vocale s'arrête. Ce mode est idéal pour le texte simple, comme les champs de saisie courts. Dans cette démo, nous l'avons définie sur "True", de sorte que la reconnaissance continue même si l'utilisateur fait une pause pendant qu'il parle.
La valeur par défaut de interimResults est "false", ce qui signifie que les seuls résultats renvoyés par le lecteur sont définitifs et ne changeront pas. La démonstration le définit sur "true" (vrai) afin que nous obtenions des résultats intermédiaires précoces susceptibles d'être modifiés. Regardez attentivement la démonstration. Le texte gris est le texte provisoire qui change parfois, tandis que le texte noir correspond aux réponses du lecteur qui sont marquées comme définitives et ne changeront 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 définissons la langue parlée pour le paramètre "lang" du système de reconnaissance vocale sur la valeur BCP-47 que l'utilisateur a sélectionnée via la liste déroulante, par exemple "en-US" pour l'anglais (États-Unis). Si cette valeur n'est pas définie, la valeur par défaut est la langue de l'élément racine et de la hiérarchie du document HTML. La reconnaissance vocale de Chrome est compatible avec de nombreuses langues (voir le tableau "langs" dans la source de la démonstration), ainsi qu'avec certaines langues de droite à gauche qui ne sont pas incluses dans cette démonstration, comme l'hébreu (he-IL) et l'arabe (ar-EG).
Après avoir défini la langue, nous appelons recognition.start() pour activer le service de reconnaissance vocale. Une fois la capture audio lancée, le gestionnaire d'événements onstart est appelé, puis pour chaque nouvel ensemble de résultats, le gestionnaire d'événements onresult est appelé.
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 dit "nouveau paragraphe". Nous utilisons donc la fonction linebreak pour les convertir en balises HTML <br> ou <p>. Enfin, il définit ces chaînes comme innerHTML de leurs éléments <span> correspondants: final_span, qui est stylisé avec du texte noir, et interim_span, qui est stylisé avec du texte gris.
interim_transcript est une variable locale et 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 changé depuis le dernier événement onresult. Nous pourrions faire de même pour final_transcript en commençant simplement la boucle for à 0. Toutefois, comme le texte final ne change jamais, nous avons rendu le code ici un peu plus efficace 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 est là uniquement pour rendre le tout plus attrayant. Il maintient l'état, affiche des messages d'information à l'utilisateur et échange l'image GIF sur le bouton du micro entre le micro statique, l'image du micro barré et l'animation du micro avec le point rouge clignotant.
L'image mic-slash s'affiche lorsque recognition.start() est appelé, puis est remplacée par mic-animate lorsque onstart se déclenche. En général, cela se produit si rapidement que la barre oblique n'est pas visible. Toutefois, la première fois que la reconnaissance vocale est utilisée, Chrome doit demander à l'utilisateur l'autorisation d'utiliser le micro. Dans ce cas, onstart ne se déclenche que si l'utilisateur autorise l'utilisation du micro. Les pages hébergées sur HTTPS n'ont pas besoin de demander l'autorisation de manière répétée, contrairement aux pages hébergées sur HTTP.
Donnez vie à vos pages Web en leur permettant d'écouter vos utilisateurs.
Nous aimerions connaître votre avis...
- Pour envoyer des commentaires sur la spécification de l'API Web Speech du W3C: e-mail, archive de diffusion, groupe de la communauté
- Pour toute remarque concernant l'implémentation de cette spécification par Chrome: e-mail, archive de messagerie
Consultez le Livre blanc sur la confidentialité dans Chrome pour savoir comment Google traite les données vocales de cette API.