Applications Web basées sur la voix – Présentation de l'API Web Speech

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 dans Chrome 25 et versions ultérieures. Voici un exemple où le texte reconnu s'affiche presque immédiatement pendant que vous parlez.

Démo de l'API Web Speech

DÉMO / SOURCE

Voyons ce qui se passe en coulisses. 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. (L'API étant 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 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 cesse de parler. 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" afin que la reconnaissance se poursuive 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 seuls les résultats finaux sont renvoyés par le moteur de reconnaissance et qu'ils ne changeront pas. La démo la définit sur "true" afin que nous obtenions des résultats intermédiaires précoces qui peuvent changer. Regardez attentivement la démo : le texte gris est le texte intermédiaire qui change parfois, tandis que le texte noir correspond aux réponses du moteur 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 module de reconnaissance vocale "lang" sur la valeur BCP-47 que l'utilisateur a sélectionnée dans la liste déroulante, par exemple "en-US" pour l'anglais (États-Unis). Si cette valeur n'est pas définie, elle est définie par défaut sur 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émo), ainsi qu'avec certaines langues de droite à gauche qui ne sont pas incluses dans cette démo, 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 module de reconnaissance vocale. Une fois la capture audio lancée, il appelle le gestionnaire d'événements onstart, puis le gestionnaire d'événements onresult pour chaque nouvel ensemble de résultats.

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, dont le style est défini avec du texte noir, et interim_span, dont le style est défini avec du texte gris.

interim_transcript est une variable locale, qui est entièrement reconstruite 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 faisant de final_transcript une variable globale, afin que cet événement puisse commencer la boucle for à event.resultIndex et n'ajouter que le nouveau texte final.

Et voilà ! Le reste du code est là uniquement pour que tout soit beau. Il conserve l'état, affiche des messages informatifs à l'utilisateur et remplace l'image GIF sur le bouton du micro par le micro statique, l'image du micro barré et le micro animé avec le point rouge clignotant.

L'image du micro barré s'affiche lorsque recognition.start() est appelé, puis est remplacée par le micro animé 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 accorde l'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.

Alors, donnez vie à vos pages Web en leur permettant d'écouter vos utilisateurs !

Votre avis nous intéresse…

Consultez Comprendre la confidentialité dans Chrome pour en savoir plus sur nos règles de confidentialité (mises à jour le 16 juin 2026).