Osnovna vadnica o nastavitvi prepoznavanja govora z Reactom

Pred kratkim sem ustvaril aplikacijo za sanjski dnevnik, ki uporablja funkcijo prepoznavanja govora v besedilo v API-ju spletnega govora JavaScript za snemanje in shranjevanje sanj uporabnika (namesto da bi od uporabnika zahteval, da sam vpiše vse sanje). Tehnologija govornega v besedilu je presenetljivo natančna. Nekaj ​​pomanjkljivosti, vendar ... trenutno jih v celoti podpira Chrome in posluša le toliko časa (do približno pet minut ali več), dokler preprosto ne izgubi zanimanja (in preneha poslušati). Za številne aplikacije je pet minut več kot dovolj, zato jih je vredno preveriti!

Pri pripravi te aplikacije sem se zelo zabaval in želel sem deliti, kar sem storil, da vključim to tehnologijo za prepoznavanje govora. Zlasti želim deliti, kako sem lahko funkcionalnost zavil v komponento React. Do konca te vadnice boste lahko

  • začetek / zaustavitev prepoznavanja govora (govor v besedilo) s klikom gumba in
  • ustavite prepoznavanje govora z uporabo glasovnih ukazov.

Spodaj je primer končnega izdelka vadnice. Modri ​​gumb zažene in ustavi prepoznavanje govora, vmesni / končni prepisi pa se pojavijo v sivi / črni barvi.

Skočimo noter!

Nastavite nov primerek SpeechRecognition.

Ne želim porabiti preveč časa za razpravo o začetni nastavitvi primerka SpeechRecognition, saj je to mogoče najti v dokumentih: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Vendar želim opozoriti, da smo postavili prepoznavanje.interimResults = res, saj je privzeto nastavljeno na false. Če ga spremenimo v true, lahko za namene te vadbe vidimo tako vmesne rezultate kot končne.

Opomba o razliki med vmesnimi in končnimi prepisi:

Vmesni prepisi so preprosto besede, skozi katere se prepozna vaš govor, ko poskuša najti najboljše ujemanje. Na primer, če ste rekli "vaflji", potem lahko vmesna obdelava vašega govora najprej sliši "grozno". Potem, sekundo ali nekaj pozneje, se lahko prilagodi "vafljem", ker bo našel boljše ujemanje. Moja poanta je: Če potrebujete natančnost, uporabite končne prepise, ne vmesne.

V to vadnico vključujemo vmesne prepise, da preprosto pokažemo, kako deluje prepoznavanje govora. Če vas vmesni podatki ne zanimajo, lahko med nastavitvijo primerka prepoznavanja govora vrstico 5 odstranite z zgornjega seznama.

Zdaj se lahko potopimo v svoj prvi cilj!

Začetek / zaustavitev prepoznavanja govora s klikom gumba

Preden napišemo katerokoli kodo, bi morali predstaviti naš pristop.

Najprej moramo ustvariti element gumba. Nato za programiranje funkcionalnosti gumba moramo napisati onClick handler, ki bo poskrbel za vsak klik na naslednji način:

  • Ko prvič kliknemo na gumb, želimo, da začnemo poslušati primer primera govora.
  • Ko kliknemo drugič, naj neha poslušati.
  • Ko nadaljujemo s klikom, se mora ta cikel zagon / zaustav ponoviti.

Če pogledamo zgornje naboje, postane jasno, da moramo to poslušno stanje (namig, namig) nekako spremljati; to pomeni, da moramo spremljati, kdaj se mora začeti / ustaviti prepoznavanje govora. Kako to lahko storimo? Ah da, lahko uporabimo lokalno stanje naše komponente React, kot je prikazano spodaj. Naša komponenta privzeto ne bo poslušala, zato bo začetno stanje poslušanja.

this.state = {poslušanje: false}

Zdaj potrebujemo način za vklop in izklop prepoznavanja govora. Se pravi, potrebujemo način, da svoje poslušanje preklopimo med resničnim in napačnim. Za to lahko napišemo preprosto metodo, toggleListen, kot je prikazano spodaj.

toggleListen () {
  this.setState = ({
    poslušanje:! this.state.listening
  })
}

Zdaj lahko napišemo naš onClick aler. To je tok, ki ga želimo:

→ Kliknite gumb

→ Preklopi med poslušanjem (tj. InvoketoggleListen)

→ Začni / ustavi prepoznavanje govora, če je to.state.listening = true / false

[→ Naredite karkoli drugega, odvisno od stanja, npr. Spremenite barvo gumba, medtem ko je this.state.listening = true]

Ustvarili bomo ločeno metodo za obravnavo vse logike prepoznavanja govora, imenovano handleListen. Sprva je smiselno, da najprej definiramo naš programski program onClick:

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

Če pa na ta način nastavite onClick handler, boste zelo hitro ugotovili, da se ne bo vedno začel, ko kliknete! Morda boste morali poslušati nekajkrat, preden začnete poslušati. Zakaj to? No, metoda ReSaT setState ni zagotovljena kot sinhrona. V ozadju se React odloči, kdaj je najbolje spremeniti stanje. Včasih je to takoj, včasih ni. Od tod tudi naša težava.

Če želite rešiti to težavo, bomo v povratnem klicu setState uporabili metodo handleListen, kot je prikazano spodaj.

toggleListen () {
  this.setState ({
    poslušanje:! this.state.listening
  }, ta.handleListen)
}

Zdaj lahko preprosto nastavimo naš programski program onClick, da je enak temu.toggleListen. Naš želeni pretok (kliknite → preklopi na zaslon → poslušaj) je zdaj zagotovljen!

onClick = {this.toggleListen}

Preostali del te vadnice je namenjen izdelovanju naše metode rokovanja. Tukaj je nekaj, kar smo doslej (vključno z nekaterimi CSS). Ne pozabite vezati teh metod!

Metoda handleListen:

Začnemo s handleListen s spodnjo kodo, ki sporoči našemu prepoznavanju govora, da začnemo poslušati, ko je to.state.listening = true.

handleListen () {
  če (this.state.listening) prepoznavanje.start ()
}

Za zbiranje vmesnih in končnih prepisov uporabljamo vgrajen aparat za prepoznavanje govora, ki se imenuje onresult, kot je prikazano v spodnji vsebini. Koda v zanki zanke izvira posebej iz dokumentov.

Na tej točki, če kliknete gumb, bi morali videti, ko govorite vmesne in končne prepise, ki vsebujejo te dive!

Če se z njim nekoliko poigrate, boste opazili, da se bo prepoznavanje govora dejansko končalo samostojno med vsako spodobno pavzo v govoru. To ni tisto, kar si želimo. Kaj pa, če uporabnik potrebuje nekaj sekund za razmislek?

Prepoznavanje govora lahko preizkusimo v »neprekinjenem« poslušanju z igranjem z drugimi vgrajenimi poslušalci dogodkov. Konkretno, lahko prepoznamo.start znova pokličemo znotraj prepoznavnosti.zaklepanje, da znova zaženemo poslušanje, če se odloči, da se bo končal sam.

Na koncu za ustavitev prepoznavanja govora preprosto dodamo stavek else, ki pokliče prepoznavanje.end, ko je to.state.listening = false.

Z zgornjo kodo, če je this.state.listening = res, vendar se prepoznavanje govora odloči, da bo nehala poslušati, se z njim manipulira še enkrat poslušanje (muahaha!). Poskusi! Prekleto bo poslušalo, dokler tega gumba še enkrat ne pritisnete… večinoma. Žal se bo sčasoma izteklo približno približno 5 minut. Če resnično potrebujete več kot 5 minut, se boste morda lahko izognili tej težavi, če se boste igrali s poslušalci dogodkov in dodali druge nadzorovane podatke v lokalno državo.

Prekinite prepoznavanje govora z uporabo glasovnih ukazov

Kaj pa, če želite ustaviti prepoznavanje govora z uporabo glasovnega ukaza namesto klika? Recimo, da želite prenehati poslušati, ko drug drugemu izgovorite besedi "ustavi" in "poslušaj". Končni prepis morate preprosto razdeliti na niz besed in če sta zadnji dve besedi matrike "stop" in "poslušanje", pokličite prepoznavanje.stop. Nato lahko iz matrike odstranite besedi "stop" in "poslušanje", da ustvarite končno besedilo, ki ne vsebuje besedne zveze "prenehati poslušati".

Na splošno je to preprosto igra manipulacije z matriko, ko imate končni prepis. Za podrobnosti o tem določenem primeru glasovnega ukaza glejte razdelek "- KOMANDE -" v zadnjem besedilu spodaj.

Opomba na zadnjo vsebino: spodaj sem navedel izjave console.log, da bom lažje spremljal dejavnost prepoznavanja govora.

  • "Poslušanje!" Se zabeleži, ko kliknete gumb in začne poslušati.
  • "... nadaljuj s poslušanjem ..." se bo beležil, ko bo prepoznavanje govora manipulirano znova zagnalo po samem zaustavitvi.
  • Ko zaustavite prepoznavanje govora s klikom, se zabeleži »Ustavljeni na klik«.
  • Ko zaustavite prepoznavanje govora z uporabo glasovnega ukaza, se zabeleži »Zaustavi na ukaz«.

To je približno za to vadnico! S to kombinacijo (SpeechRecognition + React) lahko naredite toliko več, kot je preklapljanje barve gumba ali upodabljanje druge komponente med poslušanjem.

Karkoli že počnete, se zabavajte!