En grundlæggende tutorial til, hvordan man indstiller talegenkendelse med React

For nylig oprettede jeg en drømmejournal-app, der bruger funktionen Tal-til-tekst Talegenkendelse i JavaScript's Web Speech API til at registrere og gemme en brugers drømme (i stedet for at kræve, at brugeren selv udtaster de fulde drømme). Stemme-til-tekst-teknologien er overraskende præcis. Nogle ulemper er dog ... det understøttes kun fuldt ud af Chrome på dette tidspunkt, og det lytter kun så længe (op til ca. fem minutter eller deromkring), indtil det simpelthen mister interessen (og holder op med at lytte). Med hensyn til mange apps er fem minutter mere end nok, så det er værd at tjekke ud!

Jeg havde det meget sjovt med at bygge denne app, og jeg ville dele, hvad jeg gjorde for at inkorporere denne talegenkendelsesteknologi. Specifikt vil jeg gerne dele, hvordan jeg var i stand til at pakke funktionaliteten ind i en React-komponent. Ved afslutningen af ​​denne tutorial vil du være i stand til det

  • start / stop talegenkendelse (tale-til-tekst) ved at klikke på en knap, og
  • stop talegenkendelse ved hjælp af stemmekommandoer.

Nedenfor er et eksempel på tutorials slutprodukt. Den blå knap starter og stopper talegenkendelse, og de mellemliggende / endelige transkripter vises henholdsvis i gråt / sort.

”Hvordan går det” er stadig i midlertidig behandling. ”Testning af, hvordan det går,” er den fulde endelige transkription.

Lad os hoppe ind!

Opret en ny forekomst af SpeechRecognition.

Jeg ønsker ikke at bruge for meget tid på at diskutere den første opsætning af SpeechRecognition-forekomsten, da det kan findes i dokumenterne: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Jeg vil dog bemærke, at vi indstiller anerkendelse.interimResults = sandt, da det som standard er indstillet til usandt. Ved at ændre det til sandt kan vi se de foreløbige resultater og finalen til denne tutorials formål.

En note om forskellen mellem foreløbige og endelige transkripter:

Midlertidige udskrifter er simpelthen de ord, som din talegenkendelse flytter igennem, da den forsøger at finde den bedste match. For eksempel, hvis du sagde "vafler", kan din talegenkendelses midlertidige behandling muligvis først høre "forfærdeligt". Derefter et sekund senere, kan det muligvis korrigere sig selv til "vafler", da det finder det bedre match. Mit punkt er: Hvis du har brug for nøjagtighed, skal du bruge de endelige transkripter, ikke mellemliggende.

Vi inkorporerer midlertidige transkripter i denne selvstudie blot for at demonstrere, hvordan talegenkendelse fungerer. Hvis du ikke er interesseret i midlertidige data, kan du fjerne linje 5 fra ovenstående, når du opsætter din forekomst af talegenkendelse.

Nu kan vi dykke ned i vores første mål!

Start / stop talegenkendelse med et klik på en knap

Inden vi skriver nogen kode, skal vi skitsere vores tilgang.

Vi skal først oprette et knapelement. For at programmere knappens funktionalitet skal vi derefter skrive en onClick-begivenhedshåndterer, der tager sig af hvert klik på følgende måde:

  • Når vi klikker på knappen for første gang, ønsker vi, at vores forekomst af talegenkendelse begynder at lytte.
  • Når vi klikker for anden gang, skulle det holde op med at lytte.
  • Når vi fortsætter med at klikke, skal denne start / stop-cyklus gentages.

Når man ser på ovenstående kugler, bliver det klart, at vi på en eller anden måde skal holde styr på denne lyttende ”tilstand” (tip, antydning); det vil sige, vi er nødt til at holde styr på, når talegenkendelse skal starte / stoppe. Hvordan kan vi gøre dette? Ah ja, vi kan bruge vores React-komponentens lokale tilstand, som vist nedenfor. Som standard lytter vores komponent ikke lytning, så den oprindelige lytningstilstand forfalder.

this.state = {lytter: falsk}

Vi har nu brug for en måde at slå talegenkendelse til og fra. Det vil sige, vi har brug for en måde at skifte vores tilstand af at lytte mellem sandt og falsk. Til det kan vi skrive den enkle metode, toggleListen, som vist nedenfor.

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

Nu kan vi nu skrive vores onClick-handler. Dette er den strøm, vi ønsker:

→ Klik på knappen

→ Skift lytning (dvs. invoketoggleListen)

→ Start / Stop talegenkendelse, hvis henholdsvis this.state.listening = sandt / usant

[→ Gør noget andet afhængigt af tilstand, f.eks. Skift farve på knappen, mens this.state.listening = true]

Vi opretter en separat metode til at håndtere al logik for talegenkendelse, kaldet handleListen. Først giver det mening at definere vores onClick-handler som sådan:

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

Hvis du imidlertid konfigurerer onClick-behandleren på denne måde, vil du meget hurtigt indse, at det ikke altid starter, når du klikker! Du skal muligvis klikke flere gange, før det begynder at lytte. Hvorfor er det? Reacts setState-metode garanteres ikke at være synkron. I baggrunden bestemmer React, hvornår det er bedst at ændre tilstanden. Nogle gange er det øjeblikkeligt, andre gange er det ikke. Derfor vores problem.

For at løse dette problem påkalder vi vores handleListen-metode i tilbagekaldet af setState, som vist nedenfor.

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

Nu kan vi blot indstille vores onClick-handler til at ligne denne.toggleListen. Vores ønskede flow (klik → skift lyt → lyt) er nu garanteret!

onClick = {this.toggleListen}

Resten af ​​denne tutorial er dedikeret til at udbrede vores handleListen-metode. Her er en kerne af det, vi har indtil videre (inklusive nogle CSS). Glem ikke at binde disse metoder!

Metoden handleListen:

Vi starter handleListen med nedenstående kode, der fortæller vores talegenkendelse at begynde at lytte, når this.state.listening = true.

handleListen () {
  hvis (this.state.listening) anerkendelse.start ()
}

For at indsamle midlertidige og afsluttende transkripter bruger vi talegenkendelsens indbyggede begivenhedshåndterer kaldet onresult, som vist i kernen nedenfor. Koden i for-loop kommer specifikt fra dokumenterne.

På dette tidspunkt, hvis du klikker på knappen, skal du være i stand til at se de foreløbige og endelige udskrifter, der befolker disse divs, mens du taler!

Hvis du leger lidt rundt med det, vil du bemærke, at talegenkendelsen faktisk ender på egen hånd under enhver anstændig pausetid. Dette er ikke, hvad vi ønsker. Hvad hvis brugeren har brug for et par sekunder til at tænke?

Vi kan narre talegenkendelse til "kontinuerlig" lytning ved at spille med andre indbyggede begivenhedslyttere. Specifikt kan vi kalde genkendelse.start igen inden genkendelse.tænker at genstarte lytningen, hvis den beslutter at slutte på egen hånd.

Til sidst, for at stoppe talegenkendelse, tilføjer vi blot den anden erklæring, der kalder anerkendelse.end når this.state.listening = falsk.

Med ovenstående kode, hvis this.state.listening = sandt, men talegenkendelse beslutter at stoppe lytte, manipuleres den til at lytte igen (muahaha!). Prøve det! Den darn ting fortsætter med at lytte, indtil du klikker på den knap igen ... for det meste. Desværre vil det til sidst gå ud efter ca. 5 minutter. Hvis du virkelig har brug for længere end 5 minutter, kan du muligvis komme rundt om dette problem ved at lege med begivenhedslytterne og tilføje andre kontrollerede data til den lokale stat.

Stop talegenkendelse ved hjælp af stemmekommandoer

Hvad hvis du vil stoppe talegenkendelse ved hjælp af en stemmekommando i stedet for et klik? Lad os sige, at du vil have det til at holde op med at lytte efter at have sagt ordene "stop" og "lytte" efter hinanden. Du skal blot opdele den sidste transkription i en række ord, og hvis de sidste to ord i den array er “stop” && “lytter”, skal du kalde anerkendelse.stop. Du kan derefter fjerne ordene "stop" og "lytte" fra matrixen for at fremstille en endelig tekst, der ikke indeholder udtrykket "stop lytte".

Samlet set er det simpelthen et spil arraymanipulation, når du har den sidste transkription. Se afsnittet “- KOMMANDER -” i den sidste væsentlige nedenunder for flere detaljer om dette specifikke stemmekommandoeksempel.

Bemærk om den sidste vigtighed: Jeg tilføjede nedenstående console.log-udsagn for at hjælpe med at holde styr på talegenkendelsesaktiviteten.

  • “Lytter!” Logges, når du klikker på knappen, og det begynder at lytte.
  • “... fortsæt med at lytte…” vil blive logget, når talegenkendelse manipuleres til at genstarte efter at have stoppet på egen hånd.
  • “Stoppet pr. Klik” logges, når du stopper talegenkendelse ved hjælp af et klik.
  • “Stoppet pr. Kommando” logges, når du stopper talegenkendelse ved hjælp af stemmekommandoen.

Det handler om denne tutorial! Der er så meget mere, du kan gøre med denne kombination (SpeechRecognition + React), såsom at skifte farve på din knap eller gengive en anden komponent, mens du lytter.

Uanset hvad du gør, så sjov med det!