Tutoriel de base sur la configuration de la reconnaissance vocale avec React

J'ai récemment créé une application de journal des rêves qui utilise la fonctionnalité de reconnaissance vocale vocale de l'API Web Speech de JavaScript pour enregistrer et enregistrer les rêves de l'utilisateur (au lieu de demander à l'utilisateur de saisir lui-même tous les rêves). La technologie de synthèse vocale est étonnamment précise. Quelques inconvénients cependant… pour le moment, il n’est totalement supporté par Chrome et n’écoute que très longtemps (jusqu’à environ cinq minutes environ) jusqu’à perdre tout intérêt (et à arrêter d’écouter). Pour de nombreuses applications, cinq minutes suffisent amplement, il vaut donc la peine de vérifier!

J'ai eu beaucoup de plaisir à construire cette application et je voulais partager ce que j'avais fait pour intégrer cette technologie de reconnaissance vocale. Plus précisément, je voudrais partager comment j'ai pu intégrer la fonctionnalité dans un composant React. À la fin de ce tutoriel, vous pourrez:

  • démarrer / arrêter la reconnaissance vocale (voix en texte) en un clic, et
  • arrêter la reconnaissance vocale à l'aide de commandes vocales.

Vous trouverez ci-dessous un exemple du produit final du tutoriel. Le bouton bleu lance et arrête la reconnaissance vocale et les transcriptions intermédiaires / finales apparaissent respectivement en gris / noir.

“Comment ça va” est toujours en traitement intermédiaire. «Testing testing» est définitif.«Tester tester comment ça se passe» est la transcription finale complète.

Laissez-nous entrer!

Configurez une nouvelle instance de SpeechRecognition.

Je ne veux pas passer trop de temps à discuter de la configuration initiale de l'instance SpeechRecognition, car elle se trouve dans la documentation: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Cependant, je tiens à noter que nous définissons Recognition.interimResults = true, car il est défini sur false par défaut. En le remplaçant par true, nous pouvons voir les résultats intermédiaires ainsi que le résultat final aux fins de ce didacticiel.

Une note sur la différence entre les transcriptions intermédiaires et finales:

Les transcriptions intermédiaires sont simplement les mots que votre reconnaissance vocale passe au crible lorsqu'elle tente de trouver la meilleure correspondance. Par exemple, si vous avez dit «gaufres», le traitement provisoire de votre reconnaissance vocale pourrait d’abord entendre «affreux». Ensuite, environ une seconde plus tard, il pourrait se corriger en "gaufres" car il trouve la meilleure correspondance. Mon argument est le suivant: si vous avez besoin d’exactitude, utilisez des transcriptions finales et non provisoires.

Nous intégrons les transcriptions intermédiaires dans ce tutoriel simplement pour montrer comment fonctionne la reconnaissance vocale. Si les données provisoires ne vous intéressent pas, vous pouvez supprimer la ligne 5 de la liste ci-dessus lors de la configuration de votre instance de reconnaissance vocale.

Maintenant, nous pouvons plonger dans notre premier objectif!

Démarrer / arrêter la reconnaissance vocale au clic d'un bouton

Avant d’écrire un code, nous devons définir notre approche.

Nous devons d'abord créer un élément de bouton. Ensuite, pour programmer la fonctionnalité du bouton, nous devons écrire un gestionnaire d’événements onClick, qui se chargera de chaque clic comme suit:

  • Lorsque nous cliquons sur notre bouton pour la première fois, nous souhaitons que notre instance de reconnaissance vocale commence à écouter.
  • Lorsque nous cliquons pour la deuxième fois, il devrait cesser d'écouter.
  • En continuant à cliquer, ce cycle de démarrage / arrêt devrait se répéter.

En regardant les points ci-dessus, il devient clair que nous devons garder trace de cet «état» d'écoute (indice, indice) d'une manière ou d'une autre; c'est-à-dire que nous devons savoir quand la reconnaissance vocale doit commencer / s'arrêter. Comment peut-on le faire? Ah oui, nous pouvons utiliser l’état local de notre composant React, comme indiqué ci-dessous. Par défaut, notre composant ne sera pas à l'écoute, donc l'état initial d'écoute sera différent.

this.state = {listening: false}

Nous avons maintenant besoin d’un moyen d’activer et de désactiver la reconnaissance vocale. En d'autres termes, nous avons besoin d'un moyen de basculer notre état d'écoute entre vrai et faux. Pour cela, nous pouvons écrire la méthode simple, toggleListen, comme indiqué ci-dessous.

toggleListen () {
  this.setState = ({
    écoute:! this.state.listening
  })
}

Nous pouvons maintenant écrire notre gestionnaire onClick. Voici le flux que nous voulons:

→ Cliquez sur le bouton

→ Basculer l'écoute (c'est-à-dire invoketoggleListen)

→ Démarrer / arrêter la reconnaissance vocale si this.state.listening = true / false, respectivement

[→ Faites n'importe quoi d'autre dépendant de l'état, par exemple, changez la couleur du bouton pendant que this.state.listening = true]

Nous allons créer une méthode distincte appelée handleListen pour gérer toute la logique de reconnaissance vocale. Au début, il est logique de définir d’abord notre gestionnaire onClick comme suit:

onClick = {() => {
  this.toggleListen ()
  this.handleListen ()
}}

Cependant, si vous configurez le gestionnaire onClick de cette manière, vous vous rendrez vite compte qu'il ne démarrera pas toujours lorsque vous cliquez! Vous devrez peut-être cliquer plusieurs fois avant de commencer à écouter. Pourquoi est-ce? La méthode setState de React n’est pas forcément synchrone. En arrière-plan, React décide quand il est préférable de changer d'état. Parfois c'est immédiat, parfois non. D'où notre problème.

Pour résoudre ce problème, nous allons invoquer notre méthode handleListen dans le rappel de setState, comme indiqué ci-dessous.

toggleListen () {
  this.setState ({
    écoute:! this.state.listening
  }, this.handleListen)
}

Maintenant, nous pouvons simplement configurer notre gestionnaire onClick pour qu'il soit égal à this.toggleListen. Notre flux souhaité (cliquez → basculer écouter → écouter) est maintenant garanti!

onClick = {this.toggleListen}

Le reste de ce didacticiel est consacré à l’extension de notre méthode handleListen. Voici un résumé de ce que nous avons jusqu’à présent (y compris des CSS). N'oubliez pas de lier ces méthodes!

La méthode handleListen:

Nous commençons par handleListen avec le code ci-dessous, qui indique à notre reconnaissance vocale de commencer à écouter lorsque this.state.listening = true.

handleListen () {
  if (this.state.listening) Recognization.start ()
}

Pour collecter les transcriptions intermédiaires et finales, nous utilisons le gestionnaire d’événements intégré de reconnaissance de parole appelé onultult, comme indiqué dans l’essentiel ci-dessous. Le code dans la boucle for provient spécifiquement de la documentation.

À ce stade, si vous cliquez sur le bouton, vous devriez être en mesure de voir les transcriptions intérimaires et finales remplissant ces divs pendant que vous parlez!

Si vous jouez un peu avec elle, vous remarquerez que la reconnaissance vocale se terminera d'elle-même pendant toute pause décente de la parole. Ce n'est pas ce que nous voulons. Que faire si l'utilisateur a besoin de quelques secondes pour réfléchir?

Nous pouvons tromper la reconnaissance vocale en une écoute «continue» en jouant avec d'autres auditeurs d'événements intégrés. Plus précisément, nous pouvons appeler à nouveau Recognition.Start dans Recognition.onend pour reprendre l’écoute si elle décide de se terminer seule.

Enfin, pour arrêter la reconnaissance vocale, nous ajoutons simplement la déclaration else, qui appelle Recognition.end quand this.state.listening = false.

Avec le code ci-dessus, si this.state.listening = true, mais que la reconnaissance vocale décide d'arrêter l'écoute, elle est manipulée pour une nouvelle écoute (muahaha!). Essaye le! La bonne chose continuera à écouter jusqu'à ce que vous cliquez à nouveau sur ce bouton… pour la plupart. Malheureusement, il finira par expirer après environ 5 minutes. Si vous avez vraiment besoin de plus de 5 minutes, vous pourrez peut-être contourner ce problème en jouant avec les écouteurs d'événement et en ajoutant d'autres données contrôlées à l'état local.

Arrêtez la reconnaissance vocale à l'aide de commandes vocales

Et si vous voulez arrêter la reconnaissance vocale en utilisant une commande vocale au lieu d'un clic? Disons que vous voulez qu’il arrête d’écouter après avoir prononcé les mots «arrêter» et «écouter» les uns après les autres. Vous devez simplement diviser la transcription finale en un tableau de mots. Si les deux derniers mots de ce tableau sont "stop" && "listening", appelez Recognization.stop. Vous pouvez ensuite supprimer les mots «arrêter» et «écouter» du tableau pour produire un texte final ne contenant pas la phrase «arrêter d'écouter».

Dans l’ensemble, c’est simplement un jeu de manipulation de tableaux une fois que vous avez la transcription finale. Reportez-vous à la section «- COMMANDES -» de l’essentiel ci-dessous pour plus de détails sur cet exemple de commande vocale spécifique.

Remarque sur le résumé final: j'ai ajouté les instructions console.log ci-dessous pour vous aider à garder une trace de l'activité de reconnaissance vocale.

  • «Listening!» Sera enregistré lorsque vous cliquez sur le bouton et il commence à écouter.
  • “… Continuez d'écouter…” sera enregistré lorsque la reconnaissance vocale sera manipulée pour redémarrer après un arrêt autonome.
  • «Arrêté par clic» sera enregistré lorsque vous arrêterez la reconnaissance vocale à l'aide d'un clic.
  • "Arrêté par commande" sera enregistré lorsque vous arrêterez la reconnaissance vocale à l'aide de la commande vocale.

C’est tout pour ce tutoriel! Vous pouvez faire beaucoup plus avec ce combo (SpeechRecognition + React), comme changer la couleur de votre bouton ou restituer un autre composant en cours d’écoute.

Quoi que vous fassiez, amusez-vous avec ça!