Un tutorial di base su come impostare il riconoscimento vocale con React

Di recente ho creato un'app journal di sogni che utilizza la funzione di riconoscimento vocale voice-to-text dell'API Web Speech di JavaScript per registrare e salvare i sogni di un utente (invece di richiedere all'utente di digitare i sogni completi). La tecnologia voice-to-text è sorprendentemente accurata. Alcuni aspetti negativi però ... al momento è completamente supportato da Chrome e rimane in ascolto solo per così tanto tempo (fino a circa cinque minuti circa) fino a quando non perde semplicemente interesse (e smette di ascoltare). Ai fini di molte app, cinque minuti sono più che sufficienti, quindi vale la pena dare un'occhiata!

Mi sono divertito molto a costruire questa app e volevo condividere ciò che ho fatto per incorporare questa tecnologia di riconoscimento vocale. In particolare, vorrei condividere come sono stato in grado di racchiudere la funzionalità in un componente React. Entro la fine di questo tutorial, sarai in grado di farlo

  • avviare / interrompere il riconoscimento vocale (voice-to-text) con un clic di un pulsante e
  • interrompere il riconoscimento vocale utilizzando i comandi vocali.

Di seguito è riportato un esempio del prodotto finale del tutorial. Il pulsante blu avvia e interrompe il riconoscimento vocale e le trascrizioni intermedie / finali vengono visualizzate rispettivamente in grigio / nero.

Facciamo un salto!

Imposta una nuova istanza di SpeechRecognition.

Non voglio dedicare troppo tempo a discutere della configurazione iniziale dell'istanza SpeechRecognition, poiché è disponibile nei documenti: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Tuttavia, voglio notare che impostiamo il riconoscimento.interimResults = true, poiché è impostato su false per impostazione predefinita. Modificandolo in vero, possiamo vedere i risultati intermedi e quelli finali ai fini di questo tutorial.

Una nota sulla differenza tra trascrizioni intermedie e finali:

Le trascrizioni intermedie sono semplicemente le parole attraverso le quali il tuo riconoscimento vocale si sposta mentre cerca di trovare la corrispondenza migliore. Ad esempio, se hai detto "waffle", l'elaborazione temporanea del riconoscimento vocale potrebbe prima sentire "terribile". Quindi, circa un secondo dopo, potrebbe correggersi in "waffle" quando trova la corrispondenza migliore. Il mio punto è: se hai bisogno di precisione, usa le trascrizioni finali, non provvisorie.

In questo tutorial stiamo incorporando le trascrizioni provvisorie semplicemente per dimostrare come funziona il riconoscimento vocale. Se non sei interessato ai dati provvisori, puoi rimuovere la riga 5 dall'essenza precedente quando configuri l'istanza di riconoscimento vocale.

Ora possiamo tuffarci nel nostro primo obiettivo!

Avvia / arresta il riconoscimento vocale con un clic di un pulsante

Prima di scrivere qualsiasi codice, dovremmo delineare il nostro approccio.

Dobbiamo prima creare un elemento pulsante. Quindi, per programmare la funzionalità del pulsante, è necessario scrivere un gestore eventi onClick, che si occuperà di ogni clic come segue:

  • Quando facciamo clic sul nostro pulsante per la prima volta, vogliamo che la nostra istanza di riconoscimento vocale inizi ad ascoltare.
  • Quando facciamo clic per la seconda volta, dovrebbe interrompere l'ascolto.
  • Mentre continuiamo a fare clic, questo ciclo di avvio / arresto dovrebbe ripetersi.

Guardando i proiettili sopra, diventa chiaro che dobbiamo tenere traccia di questo "stato" d'ascolto (suggerimento, suggerimento) in qualche modo; vale a dire, dobbiamo tenere traccia di quando il riconoscimento vocale deve essere avviato / interrotto. Come possiamo farlo? Ah sì, possiamo usare lo stato locale del nostro componente React, come mostrato di seguito. Per impostazione predefinita, il nostro componente non ascolterà, quindi lo stato iniziale di ascolto verrà visualizzato.

this.state = {listening: false}

Ora abbiamo bisogno di un modo per attivare e disattivare il riconoscimento vocale. Cioè, abbiamo bisogno di un modo per alternare il nostro stato di ascolto tra vero e falso. Per questo, possiamo scrivere il metodo semplice, toggleListen, come mostrato di seguito.

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

Ora possiamo ora scrivere il nostro gestore onClick. Questo è il flusso che vogliamo:

→ Fare clic sul pulsante

→ Attiva / disattiva ascolto (ovvero invoketoggleListen)

→ Avvia / arresta il riconoscimento vocale se this.state.listening = true / false, rispettivamente

[→ Fai qualsiasi altra cosa in base allo stato, ad esempio, cambia il colore del pulsante mentre this.state.listening = true]

Creeremo un metodo separato per gestire tutta la logica di riconoscimento vocale, chiamata handleListen. All'inizio, ha senso definire innanzitutto il nostro gestore onClick in questo modo:

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

Tuttavia, se imposti il ​​gestore onClick in questo modo, ti accorgerai molto rapidamente che non si avvierà sempre quando fai clic! Potrebbe essere necessario fare clic più volte prima che inizi l'ascolto. Perchè è questo? Bene, non è garantito che il metodo setState di React sia sincrono. In background, React decide quando è meglio cambiare lo stato. A volte è immediato, a volte no. Da qui il nostro problema.

Per risolvere questo problema, invocheremo il nostro metodo handleListen nel callback di setState, come mostrato di seguito.

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

Ora, possiamo semplicemente impostare il nostro gestore onClick su uguale a this.toggleListen. Il flusso desiderato (clic → attiva / disattiva ascolto → ascolta) è ora garantito!

onClick = {} this.toggleListen

Il resto di questo tutorial è dedicato alla realizzazione del nostro metodo handleListen. Ecco un riassunto di ciò che abbiamo finora (inclusi alcuni CSS). Non dimenticare di associare questi metodi!

Il metodo handleListen:

Iniziamo handleListen con il codice seguente, che dice al nostro riconoscimento vocale di iniziare l'ascolto quando this.state.listening = true.

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

Per raccogliere le trascrizioni intermedie e finali, utilizziamo il gestore di eventi integrato del riconoscimento vocale chiamato onresult, come mostrato nella figura seguente. Il codice nel ciclo for proviene specificamente dai documenti.

A questo punto, se fai clic sul pulsante, dovresti essere in grado di vedere le trascrizioni intermedie e finali che popolano quei div mentre parli!

Se ci provi per un po ', noterai che il riconoscimento vocale finirà effettivamente da solo durante qualsiasi pausa decente nel discorso. Questo non è ciò che vogliamo. Cosa succede se l'utente ha bisogno di qualche secondo per pensare?

Possiamo ingannare il riconoscimento vocale in ascolto "continuo" suonando con altri ascoltatori di eventi integrati. In particolare, possiamo chiamare il riconoscimento. Ricominciare entro il riconoscimento. Per riavviare l'ascolto se decide di terminare da solo.

Infine, per interrompere il riconoscimento vocale, aggiungiamo semplicemente l'istruzione else, che chiama il riconoscimento.end quando this.state.listening = false.

Con il codice sopra, se this.state.listening = true, ma il riconoscimento vocale decide di interrompere l'ascolto, viene nuovamente manipolato in ascolto (muahaha!). Provalo! La cosa maledetta continuerà ad ascoltare finché non fai di nuovo clic su quel pulsante ... per la maggior parte. Sfortunatamente, alla fine scadrà dopo circa 5 minuti circa. Se hai davvero bisogno di più di 5 minuti, potresti essere in grado di aggirare questo problema giocando con i listener di eventi e aggiungendo altri dati controllati allo stato locale.

Interrompere il riconoscimento vocale utilizzando i comandi vocali

Cosa succede se si desidera interrompere il riconoscimento vocale utilizzando un comando vocale anziché un clic? Diciamo che vuoi che smetta di ascoltare dopo aver detto le parole "stop" e "ascolto" uno dopo l'altro. Devi semplicemente dividere la trascrizione finale in un array di parole, e se le ultime due parole di quell'array sono "stop" && "ascolto", allora chiama il riconoscimento.stop. È quindi possibile rimuovere le parole "stop" e "ascolto" dall'array per produrre un testo finale che non contenga la frase "smetti di ascoltare".

Nel complesso, è semplicemente un gioco di manipolazione di array una volta ottenuta la trascrizione finale. Vedere la sezione "- COMANDI -" nell'ultima versione seguente per ulteriori dettagli su questo specifico esempio di comando vocale.

Nota sull'essenza finale: ho aggiunto le seguenti istruzioni console.log per aiutare a tenere traccia dell'attività di riconoscimento vocale.

  • "Ascolto!" Verrà registrato quando si fa clic sul pulsante e inizia l'ascolto.
  • "... continua ad ascoltare ..." verrà registrato quando il riconoscimento vocale viene modificato in riavvio dopo l'interruzione da solo.
  • "Interrotto per clic" verrà registrato quando si interrompe il riconoscimento vocale utilizzando un clic.
  • "Interrotto per comando" verrà registrato quando si interrompe il riconoscimento vocale utilizzando il comando vocale.

Questo è tutto per questo tutorial! C'è molto di più che puoi fare con questa combo (SpeechRecognition + React), come cambiare il colore del tuo pulsante o renderizzare qualche altro componente durante l'ascolto.

Qualunque cosa tu faccia, divertiti!