Pamata apmācība par to, kā iestatīt runas atpazīšanu ar React

Nesen izveidoju sapņu žurnāla lietotni, kas izmanto JavaScript Web Speech API balss-teksta runas atpazīšanas funkciju, lai ierakstītu un saglabātu lietotāja sapņus (tā vietā, lai lietotājam prasītu pašiem izrakstīt visus sapņus). Balss-teksta tehnoloģija ir pārsteidzoši precīza. Kaut arī daži negatīvi… to pašlaik pilnībā atbalsta tikai Chrome, un tas klausās tikai tik ilgi (apmēram apmēram piecas minūtes vai apmēram), līdz vienkārši zaudē interesi (un pārstāj klausīties). Daudzu lietotņu vajadzībām piecu minūšu ir vairāk nekā pietiekami, tāpēc ir vērts to pārbaudīt!

Man bija ļoti jautri veidot šo lietotni, un es vēlējos dalīties ar to, ko izdarīju, lai iekļautu šo runas atpazīšanas tehnoloģiju. Konkrēti, es vēlētos dalīties ar to, kā man bija iespēja iesaiņot funkcionalitāti React komponentā. Līdz šīs apmācības beigām jūs to varēsit

  • uzsākt / pārtraukt runas atpazīšanu (no balss uz tekstu), noklikšķinot uz pogas, un
  • pārtraukt runas atpazīšanu, izmantojot balss komandas.

Zemāk ir apmācības gala produkta piemērs. Zilā poga sāk un pārtrauc runas atpazīšanu, un starpposma / gala atšifrējumi parādās attiecīgi pelēkā / melnā krāsā.

Pagaidu apstrāde joprojām notiek kā notiek? “Pārbaudes pārbaude” ir galīga.Pilns galīgais stenogramma ir “pārbaude, kā notiek”.

Lejam iekšā!

Iestatiet jaunu SpeechRecognition gadījumu.

Es nevēlos tērēt pārāk daudz laika, lai apspriestu SpeechRecognition instances sākotnējo iestatīšanu, jo tas ir atrodams dokumentos: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Tomēr es gribu atzīmēt, ka mēs iestatām atzīšanu.interimResults = true, jo pēc noklusējuma tā ir iestatīta uz false. Nomainot to uz patiesu, šīs apmācības nolūkos mēs varam redzēt gan starpposma rezultātus, gan arī galīgos.

Piezīme par atšķirību starp pagaidu un galīgajiem norakstiem:

Pagaidu atšifrējumi ir vienkārši vārdi, kurus jūsu runas atpazīšana izsvītro, mēģinot atrast vislabāko atbilstību. Piemēram, ja jūs teicāt “vafeles”, runas atpazīšanas pagaidu apstrāde vispirms var dzirdēt “šausmīgi”. Pēc tam, sekundi vai vēlāk, tas varētu izlabot sevi “vafelēs”, jo atrod labāku spēli. Mans viedoklis ir šāds: ja jums nepieciešama precizitāte, izmantojiet galīgos norakstus, nevis pagaidu.

Šajā mācību materiālā mēs iekļaujam pagaidu atšifrējumus, lai vienkārši parādītu, kā darbojas runas atpazīšana. Ja jūs neinteresē starpposma dati, iestatot runas atpazīšanas gadījumu, varat noņemt 5. rindu no iepriekšminētās būtības.

Tagad mēs varam ienirt savā pirmajā mērķī!

Sāciet / apturiet runas atpazīšanu, noklikšķinot uz pogas

Pirms kāda koda rakstīšanas mums vajadzētu izklāstīt savu pieeju.

Vispirms mums jāizveido pogas elements. Pēc tam, lai programmētu pogas funkcionalitāti, mums jāraksta onClick notikumu apstrādātājs, kurš par katru klikšķi rūpēsies šādi:

  • Pirmoreiz noklikšķinot uz mūsu pogas, mēs vēlamies, lai mūsu runas atpazīšanas piemērs sāktu klausīties.
  • Kad mēs noklikšķinām otro reizi, tam vajadzētu pārstāt klausīties.
  • Kad mēs turpinām noklikšķināt, šim sākuma / apstāšanās ciklam vajadzētu atkārtoties.

Aplūkojot iepriekš minētās aizzīmes, kļūst skaidrs, ka mums kaut kā ir jāseko līdzi šim klausīšanās “stāvoklim” (mājiens, mājiens); tas ir, mums ir jāseko līdzi, kad jāuzsāk / jāpārtrauc runas atpazīšana. Kā mēs to varam izdarīt? Jā, mēs varam izmantot mūsu React komponenta vietējo stāvokli, kā parādīts zemāk. Pēc noklusējuma mūsu komponents netiks klausīts, tāpēc sākotnējais klausīšanās stāvoklis būs nepatiess.

this.state = {klausās: viltus}

Tagad mums ir nepieciešams veids, kā ieslēgt un izslēgt runas atpazīšanu. Tas ir, mums ir nepieciešams veids, kā pārslēgt mūsu klausīšanās stāvokli starp patiesu un nepatiesu. Šim nolūkam mēs varam uzrakstīt vienkāršo metodi toggleListen, kā parādīts zemāk.

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

Tagad mēs varam uzrakstīt savu onClick apstrādātāju. Šī ir plūsma, kuru mēs vēlamies:

→ Noklikšķiniet uz pogas

→ Pārslēgt klausīšanos (t.i., invoketoggleListen)

→ Sāciet / pārtrauciet runas atpazīšanu, ja this.state.listening = true / false, attiecīgi

[→ Dariet kaut ko citu, kas atkarīgs no stāvokļa, piemēram, mainiet pogas krāsu, kamēr this.state.listening = true]

Mēs izveidosim atsevišķu metodi visas runas atpazīšanas loģikas apstrādei, ko sauc par handleListen. Sākumā ir jēga vispirms definēt mūsu onClick apstrādātāju šādi:

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

Tomēr, ja šādā veidā iestatīsit onClick apstrādātāju, jūs ļoti ātri sapratīsit, ka tas ne vienmēr sāksies, kad noklikšķināsit! Jums varētu nākties noklikšķināt vairākas reizes, pirms tā sāk klausīties. Kāpēc ir šis? Nu, nav garantēta, ka React's setState metode būs sinhrona. Fonā React izlemj, kad vislabāk mainīt stāvokli. Dažreiz tas ir tūlītējs, dažreiz tas nav. Līdz ar to mūsu problēma.

Lai atrisinātu šo problēmu, setState atzvanīšanā mēs izmantosim mūsu HandListen metodi, kā parādīts zemāk.

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

Tagad mēs varam vienkārši iestatīt mūsu onClick apstrādātāju, lai tas būtu vienāds ar šo.toggleListen. Mūsu vēlamā plūsma (noklikšķiniet uz → pārslēgt klausīties → klausīties) tagad ir garantēta!

onClick = {this.toggleListen}

Pārējā šī apmācība ir veltīta mūsu handleListen metodes izvēršanai. Šeit ir kopsavilkums par to, kas mums ir līdz šim (ieskaitot dažus CSS). Neaizmirstiet saistīt šīs metodes!

Rokturis-metode

Mēs sākam HandListen ar zemāk redzamo kodu, kas liek mūsu runas atpazīšanai sākt klausīties, kad this.state.listening = true.

handleListen () {
  if (this.state.listening) atzīšana.start ()
}

Lai savāktu starpposma un galīgos norakstus, mēs izmantojam runas atpazīšanas iebūvēto notikumu apstrādātāju, ko sauc par onresult, kā parādīts turpmāk tekstā. Kods, kas paredzēts cilpai, nāk no dokumentiem.

Šajā brīdī, noklikšķinot uz pogas, jums vajadzētu būt redzamam starpposma un galīgajam atšifrējumam, kurā jūs runājat.

Ja jūs mazliet par to spēlējaties, pamanīsit, ka runas atpazīšana patiesi beigsies katras pienācīgas runas pauzes laikā. Tas nav tas, ko mēs vēlamies. Ko darīt, ja lietotājam ir vajadzīgas dažas sekundes, lai domātu?

Mēs varam pievilināt runas atpazīšanu “nepārtrauktā” klausīšanās spēlē, spēlējot ar citiem iebūvētajiem notikumu klausītājiem. Konkrētāk, mēs varam atkal piezvanīt atpazīšanai.sākt pa atpazīstamības sadaļu, lai atsāktu klausīšanos, ja tā nolemj izbeigt pati.

Visbeidzot, lai apturētu runas atpazīšanu, mēs vienkārši pievienojam paziņojumu citam, kas izsauc atzīšanu.end, kad this.state.listening = nepatiess.

Izmantojot iepriekš minēto kodu, ja this.state.listening = true, bet runas atpazīšana nolemj pārtraukt klausīšanos, tas tiek manipulēts ar atkārtotu klausīšanos (muahaha!). Izmēģini! Darn lieta klausīsies, līdz jūs noklikšķināt šo pogu vēlreiz ... lielākoties. Diemžēl tas noilgst pēc apmēram 5 minūtēm. Ja jums patiešām nepieciešamas vairāk nekā 5 minūtes, iespējams, varēsit izvairīties no šī jautājuma, spēlējoties ar pasākuma klausītājiem un pievienojot vietējam stāvoklim citus kontrolētus datus.

Pārtrauciet runas atpazīšanu, izmantojot balss komandas

Ko darīt, ja vēlaties pārtraukt runas atpazīšanu, izmantojot balss komandu, nevis klikšķi? Pieņemsim, ka vēlaties, lai tas pārstāj klausīties pēc vārdiem “apstāties” un “klausīties” viens pēc otra. Jums vienkārši jāsadala galīgais atšifrējums vārdu masīvā, un, ja šī masīva pēdējie divi vārdi ir “stop” un “klausīšanās”, tad piezvaniet atzīšana.stop. Pēc tam no masīva var noņemt vārdus “apstāties” un “klausīties”, lai iegūtu gala tekstu, kurā nav frāzes “pārtraukt klausīties”.

Kopumā tā ir vienkārši spēle ar masīva manipulācijām, kad būsit saņēmis galīgo stenogrammu. Lai iegūtu sīkāku informāciju par šo īpašo balss komandu piemēru, skatiet sadaļu “- Komandas -” galīgajā kopsavilkumā.

Piezīme par galīgo būtību: pievienoju zemāk esošos paziņojumus console.log, lai palīdzētu izsekot runas atpazīšanas darbībām.

  • Noklikšķinot uz pogas, “Klausos!” Tiks reģistrēts un tas sāks klausīties.
  • “… Turpiniet klausīties…” tiks reģistrēts, kad runas atpazīšana tiek manipulēta ar restartēšanu pēc apstāšanās pati.
  • “Apstādināts par klikšķi” tiks reģistrēts, kad apstādināsit runas atpazīšanu, izmantojot klikšķi.
  • “Apturēta komanda” tiks reģistrēta, kad pārtrauksit runas atpazīšanu, izmantojot balss komandu.

Tas ir par šo mācību! Ar šo kombo (SpeechRecognition + React) var darīt vēl daudz vairāk, piemēram, pogas krāsas maiņa vai kāda cita komponenta atveidošana klausīšanās laikā.

Lai ko jūs darītu, izklaidējieties ar to!