La nouvelle API Web Speech JavaScript permet d'intégrer facilement la reconnaissance vocale à vos pages Web. Cette API offre un contrôle et une flexibilité précis 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 pendant que vous parlez.
Découvrons plus en détail cette fonctionnalité. 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 son navigateur à niveau. (Étant donné que l'API est encore en phase de test, elle est actuellement précédée d'un préfixe fournisseur.) Enfin, nous créons l'objet webkitSpeechRecognition qui fournit l'interface vocale, et 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 la reconnaissance vocale s'arrête lorsque l'utilisateur arrête de parler. Ce mode est idéal pour le texte simple, comme les champs de saisie courts. Dans cette démonstration, nous la définissons sur "true" afin que la reconnaissance se poursuive même si l'utilisateur s'arrête 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 programme de reconnaissance sont finaux et ne changent pas. La version de démonstration indique "true" afin d'obtenir des résultats provisoires et provisoires, susceptibles de changer. Regardez attentivement la démonstration. Le texte en gris est le texte provisoire qui change parfois, tandis que le texte noir correspond aux réponses de l'outil de reconnaissance qui sont marquées comme finales et ne changeront pas.
Pour commencer, l'utilisateur clique sur le bouton du micro, ce qui déclenche le code suivant:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Nous définissons la langue parlée pour le programme de reconnaissance vocale "lang" sur 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 celle 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 démonstration), ainsi que certaines langues qui se lisent de droite à gauche qui ne sont pas incluses dans cette démonstration, comme he-IL et ar-EG.
Une fois la langue définie, 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, il appelle 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 obtenues 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 en tant que innerHTML des éléments <span> correspondants: final_span, qui est stylisé avec du texte en 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 changé 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 rendu le code un peu plus efficace en rendant final_transcript global, afin que cet événement puisse lancer la boucle For à event.resultIndex et n'ajouter qu'un nouveau texte final.
Et voilà ! Le reste du code est là pour rendre tout beau. Elle conserve l'état, affiche des messages informatifs à l'utilisateur et remplace l'image GIF du bouton du micro par le micro statique, l'image barre oblique du micro et l'animation du micro avec le point rouge clignotant.
L'image de la barre oblique du micro s'affiche lorsque recognition.start() est appelé, puis 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 l'autorise. Les pages hébergées sur HTTPS n'ont pas besoin de demander plusieurs fois l'autorisation, contrairement aux pages hébergées par HTTP.
Alors, donnez vie à vos pages Web en leur permettant d'écouter vos utilisateurs !
Votre avis nous intéresse...
- Commentaires sur les spécifications de l'API Web Speech du W3C: e-mail, archive de messagerie, groupe de la communauté
- Pour nous faire part de vos commentaires sur l'implémentation de cette spécification dans Chrome: e-mail, archive de messagerie
Consultez le livre blanc sur la confidentialité dans Chrome pour découvrir comment Google traite les données vocales à partir de cette API.