Alapvető oktatóanyag a beszédfelismerés beállításáról a React segítségével

Nemrég létrehoztam egy álomnapló-alkalmazást, amely a JavaScript Web Speech API hang-szöveges beszédfelismerési funkcióját használja a felhasználó álmai rögzítéséhez és mentéséhez (ahelyett, hogy a felhasználót maguknak írnák ki a teljes álmokról). A hang-szöveges technológia meglepően pontos. Néhány hátránya azonban, hogy ezt a jelen pillanatban csak a Chrome támogatja, és csak ennyit hallgat (kb. Körülbelül öt percig), amíg egyszerűen elveszti az érdeklődését (és megállítja a hallgatást). Sok alkalmazás szempontjából öt perc elegendő, tehát érdemes megnézni!

Nagyon szórakoztató volt ez az alkalmazás, és meg akartam osztani azt, amit tettem, hogy beépítsem ezt a beszédfelismerő technológiát. Pontosabban szeretném megosztani, hogyan tudtam beilleszteni a funkciókat a React összetevőbe. Az oktatóanyag végére képes leszel

  • a beszédfelismerés elindítása / leállítása (hangról szövegre) egy gombnyomással, és
  • állítsa le a beszédfelismerést hangutasításokkal.

Az alábbiakban bemutatjuk az oktatóanyag végtermékét. A kék gomb elindítja és leállítja a beszédfelismerést, az közbenső / végleges átirat szürke / fekete színben jelenik meg.

A „hogyan megy” folyamatban van a közbenső feldolgozásban. A „tesztelés tesztelése” végleges.A „tesztelés tesztelése, hogy megy?” A teljes végleges átirat.

Ugorjunk be!

Állítsa be a SpeechRecognition új példányát.

Nem akarok túl sok időt költeni a SpeechRecognition példány kezdeti beállításának megvitatására, mivel ez megtalálható a következő dokumentumokban: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Ugyanakkor szeretném megjegyezni, hogy az tunn.interimResults = true értéket állítottuk be, mivel alapértelmezés szerint hamis értékre van állítva. Ha igazra változtatjuk, láthatjuk az időközi eredményeket és a végső eredményeket ezen oktatóanyag céljaira.

Megjegyzés az ideiglenes és a végleges átirat közötti különbségről:

Az ideiglenes átiratok egyszerűen azok a szavak, amelyeket a beszédfelismerés átvált, amikor megpróbálja megtalálni a legjobb egyezést. Például, ha azt mondta: „gofri”, akkor a beszédfelismerés ideiglenes feldolgozása először „szörnyű” hangot hallhat. Aztán, körülbelül egy másodperccel később, javíthatja magát a „gofrira”, mivel megtalálja a jobb illeszkedést. Az a véleményem, hogy ha pontosságra van szüksége, akkor használjon végleges átiratot, ne közbenső.

Az átmeneti átiratot belefoglaljuk ebbe az oktatóanyagba, egyszerűen annak bemutatására, hogy a beszédfelismerés hogyan működik. Ha nem érdekli az ideiglenes adatok, akkor a beszédfelismerés példányának beállításakor eltávolíthatja az 5. sort a fenti lényegről.

Most belemerülhetünk az első célunkba!

A beszédfelismerés elindítása / leállítása egy gombnyomással

Mielőtt bármilyen kódot megírnánk, körvonalazzuk a megközelítést.

Először létre kell hoznunk egy gombelemet. Ezután a gomb funkcionalitásának programozásához el kell írnunk egy onClick eseménykezelőt, amely az egyes kattintásokról a következőképpen gondoskodik:

  • Amikor először kattintunk a gombra, azt akarjuk, hogy a beszédfelismerés példája meghallgassa.
  • Amikor másodszor kattintunk, akkor abba kell hagynia a figyelmet.
  • Amint folytatjuk a kattintást, ennek a start / stop ciklusnak meg kell ismételni.

A fenti golyókat tekintve világossá válik, hogy ezt a hallgató „állapotot” (utalás, utalás) valahogy nyomon kell követnünk; vagyis nyomon kell követnünk, mikor kell a beszédfelismerésnek elindulnia / leállnia. Hogyan tehetjük ezt? Igen, használhatjuk a React komponens helyi állapotát, amint az alább látható. Alapértelmezés szerint a komponens nem fog hallgatni, tehát a hallgatás kezdeti állapota téves.

this.state = {hallgat: hamis}

Most szüksége van egy módra a beszédfelismerés be- és kikapcsolására. Vagyis szükségünk van egy módra, amellyel megváltoztathatjuk hallgatásunk állapotát az igaz és a hamis között. Ehhez az alább bemutatott módon írhatjuk a toggleListen egyszerű módszert.

toggleListen () {
  this.setState = ({
    hallgat:! this.state.lisinting
  })
}

Most már meg is írhatjuk az onClick kezelőnket. Ez az az áramlás, amelyet szeretnénk:

→ Kattintson a gombra

→ Váltás a hallgatásra (azaz a invoketoggleListen)

→ A beszédfelismerés indítása / leállítása, ha this.state.listening = igaz / hamis

[→ Tegyen meg bármi mást az állapot függvényében, például változtassa meg a gomb színét, miközben this.state.listening = true]

Az összes beszédfelismerési logika kezelésére külön kezelési módszert fogunk létrehozni, amelyet úgy kezelünk, hogy kezeljük. Eleinte érdemes először definiálni az onClick kezelőt:

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

Ha azonban az onClick kezelőt ilyen módon állítja be, akkor nagyon gyorsan rájön, hogy nem mindig indul, amikor rákattint! Lehet, hogy többször rá kell kattintania, mielőtt megkezdi a hallgatást. Miért ez? Nos, nem garantált, hogy a React setState módszere szinkron. A háttérben a React dönti el, mikor lehet a legjobb az állapot megváltoztatása. Néha ez azonnali, néha nem. Ezért a problémánk.

A probléma megoldása érdekében a setState visszahívásában meghívjuk a handleListen módszerünket, az alább látható módon.

toggleListen () {
  this.setState ({
    hallgat:! this.state.lisinting
  }, this.handleListen)
}

Most egyszerűen beállíthatjuk, hogy az onClick kezelőnk megegyezzen az this.toggleListen értékkel. A kívánt folyamatunk (kattintás → váltás figyelés → figyelés) garantált!

onClick = {this.toggleListen}

Ez az oktatóprogram további része a handleListen módszer kidolgozására szolgál. Az alábbiakban röviden ismertetjük eddig meglévőket (beleértve néhány CSS-t). Ne felejtsd el megkötni ezeket a módszereket!

A handleListen módszer:

Kezdjük a handleListen-rel az alábbi kóddal, amely megmondja beszédfelismerésünknek, hogy kezdje meghallgatni, amikor this.state.listening = true.

handleListen () {
  if (this.state.listening) tunntatás.start ()
}

Az ideiglenes és a végleges átiratgyűjtéshez a beszédfelismerés beépített eseménykezelőjét használjuk, az onresult néven, az alábbi lényegi ábra szerint. A for ciklusban szereplő kód kifejezetten a dokumentumokból származik.

Ezen a ponton, ha rákattint a gombra, látnia kell az átmeneti és a végleges átiratot, amelyben az Ön divíziója szerepel.

Ha egy kicsit játszik vele, észreveszi, hogy a beszédfelismerés valójában önmagában véget ér bármilyen tisztességes beszédszünet alatt. Nem ezt akarjuk. Mi van, ha a felhasználónak néhány másodpercre szüksége van a gondolkodásra?

Megbeszélhetjük a beszédfelismerést a „folyamatos” hallgatásba, ha más beépített eseményhallgatókkal játszunk. Pontosabban, fel lehet hívni a tunntatás.start ismét a felismerés.onendben, hogy újraindítsuk a hallgatást, ha úgy dönt, hogy önmagától véget ér.

Végül, a beszédfelismerés leállításához egyszerűen hozzátesszük a else utasítást, amely felhívja az tunntatás.end-et, amikor this.state.listening = false.

A fenti kóddal, ha ez.state.listening = true, de a beszédfelismerés úgy dönt, hogy abbahagyja a hallgatást, akkor ismét meghallgatásra manipulálják (muahaha!). Próbáld ki! A rohadt dolog addig hallgat, amíg rá nem kattint rá a gombra ... a legtöbb esetben. Sajnos kb. Öt perc múlva ez idővel lejár. Ha valóban 5 percnél hosszabb időre van szüksége, akkor lehet, hogy megkerüli ezt a kérdést, ha az eseményhallgatókkal játszik és más ellenőrzött adatokat ad hozzá a helyi államhoz.

A beszédfelismerés leállítása hangparancsokkal

Mi lenne, ha meg akarja állítani a beszédfelismerést egy kattintás helyett egy hangparancs segítségével? Tegyük fel, hogy azt akarja, hogy abbahagyja a hallgatást, miután egymás után megszólalt a „stop” és „hallgatta” szavakat. Egyszerűen fel kell osztania a végleges átiratot egy tömbre, és ha a tömb utolsó két szava “stop” és “hallgatás”, akkor hívja fel a tunnó.stop-t. Ezután eltávolíthatja a tömbből a „stop” és a „hallgatás” szavakat, hogy olyan végleges szöveget kapjon, amely nem tartalmazza a „stop listen” kifejezést.

Összességében egyszerűen tömb manipulációs játék, miután megkapta a végleges átiratot. Lásd az alábbiakban a „- KEZELÉSEK -” részt az alábbiakban.

Megjegyzés a végső lényegről: Az alábbiakban a console.log utasításokat adtam hozzá, hogy segítsék nyomon követni a beszédfelismerési tevékenységeket.

  • A „Figyelem!” Naplózásra kerül, amikor rákattint a gombra, és elkezdi hallgatni.
  • A „Folytasd a hallgatást…” naplózásra kerül, amikor a beszédfelismerést az önműködő leállítás után manipulálják az újraindítással.
  • A „Stop per kattintás” naplózódik, ha kattintással leállítja a beszédfelismerést.
  • A „Leállított parancsonként” naplózódik, ha a beszédfelismerést leállítja a hangutasítás segítségével.

Erről szól ez az oktatóprogram! Ennél sokkal többet lehet megtenni ezzel a kombinációval (SpeechRecognition + React), például átváltani a gomb színére, vagy hallgatás közben más összetevőt megjeleníteni.

Bármit is csinál, érezd jól magad!