Põhiline õpetus kõnetuvastuse seadistamiseks Reacti abil

Lõin hiljuti unistuste ajakirjarakenduse, mis kasutab JavaScripti Web Speech API häälteksti kõnetuvastuse funktsiooni kasutaja unistuste salvestamiseks ja salvestamiseks (selle asemel, et nõuda, et kasutaja kirjutaks kõik unistused ise välja). Hääle-teksti tehnoloogia on üllatavalt täpne. Mõni varjukülg on ... seda toetab Chrome praegu täielikult ja see kuulab ainult nii kaua (umbes umbes viis minutit), kuni lihtsalt huvi kaotab (ja lõpetab kuulamise). Paljude rakenduste jaoks on viis minutit enam kui piisav, nii et tasub vaadata!

Selle rakenduse ehitamine oli mul väga lõbus ja tahtsin jagada seda, mida ma selle kõnetuvastustehnoloogia kaasamiseks tegin. Täpsemalt tahaksin jagada seda, kuidas suutsin funktsionaalsuse mässida Reacti komponenti. Selle õpetuse lõpuks saate seda teha

  • käivitage / lõpetage kõnetuvastus (häältekstiks) ühe nupuvajutusega ja
  • lõpetage kõnetuvastus häälkäskluste abil.

Allpool on näide juhendaja lõpptoote kohta. Sinine nupp käivitab ja peatab kõnetuvastuse ning vahepealsed / lõplikud ärakirjad on vastavalt hallid / mustad.

“Kuidas läheb” on endiselt vahepealses töötluses. “Testimise testimine” on lõplik.

Hüppame sisse!

Seadistage SpeechRecognition uus eksemplar.

Ma ei taha kulutada liiga palju aega SpeechRecognition eksemplari esialgse seadistamise arutamiseks, kuna selle leiate dokumentidest: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Siiski tahan märkida, et määrasime tunnustamise.interimResults = true, kuna vaikeseadeks on see seatud valele. Kui muudate selle tõeseks, näeme selle õpetuse jaoks nii vahetulemusi kui ka lõplikke tulemusi.

Märkus vahepealsete ja lõplike ärakirjade vahel:

Vahetekstid on lihtsalt sõnad, mida teie kõnetuvastus läbi proovib, kui see püüab leida parimat vastet. Näiteks kui ütlesite „vahvlid”, võib teie kõnetuvastuse ajutine töötlemine kuulda kõigepealt sõna „kohutav”. Siis, umbes sekund hiljem, võib see end parandada “vahvlitega”, kuna see leiab parema sobivuse. Minu mõte on: kui vajate täpsust, kasutage lõplikke ärakirju, mitte ajutisi.

Kaasame sellesse õppematerjalisse ajutised ärakirjad lihtsalt selleks, et näidata kõnetuvastuse toimimist. Kui vaheandmed teid ei huvita, võite kõnetuvastuse esinemisjuhu seadistamisel rea 5 ülaltoodud sisust eemaldada.

Nüüd võime sukelduda oma esimesse eesmärki!

Kõnetuvastuse käivitamine / peatamine ühe nupuvajutusega

Enne koodide kirjutamist peaksime tutvustama oma lähenemisviisi.

Kõigepealt peame looma nupuelemendi. Seejärel peame nupu funktsionaalsuse programmeerimiseks kirjutama onClicki sündmuste käitleja, kes hoolitseb iga klõpsu eest järgmiselt:

  • Kui klõpsame esimest korda oma nuppu, tahame, et kõnetuvastuse juhtum hakkaks kuulama.
  • Kui me teist korda klõpsame, peaks see kuulamise lõpetama.
  • Klõpsamise jätkamisel peaks see algus- / seiskamistsükkel kordama.

Ülaltoodud täppe vaadates saab selgeks, et peame seda kuulavat “olekut” (vihje, vihje) kuidagi jälgima; see tähendab, et peame jälgima, millal kõnetuvastus peab algama / peatuma. Kuidas saaksime seda teha? Jah, me võime kasutada meie Reacti komponendi kohalikku olekut, nagu allpool näidatud. Vaikimisi meie komponent ei kuula, seega on kuulamise algseisund vale.

this.state = {kuulamine: vale}

Nüüd vajame viisi kõnetuvastuse sisse- ja väljalülitamiseks. See tähendab, et vajame viisi, kuidas muuta meie kuulamise olek õige ja vale vahel. Selleks võime kirjutada lihtsa meetodi - toggleListen, nagu allpool näidatud.

toggleListen () {
  this.setState = ({
    kuulamine:! see
  })
}

Nüüd saame nüüd kirjutada oma onClicki käitleja. See on vool, mida me tahame:

→ Klõpsake nuppu

→ Kuulamise sisse / välja lülitamine (nt.

→ Alusta / peata kõnetuvastus, kui see.state.listening = vastavalt tõene / vale

[→ Tehke midagi muud olekust sõltuvat, nt muutke nupu värvi, kui this.state.listening = true]

Kõigi kõnetuvastuse loogikate käsitlemiseks loome eraldi meetodi, mille nimi on handleListen. Alguses on mõistlik kõigepealt määratleda meie onClicki käitleja nii:

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

Kui aga häälestate onClicki käitleja sel viisil, saate väga kiiresti aru, et see ei käivitu alati klõpsamisel! Võimalik, et peate mitu korda klõpsama, enne kui see kuulama hakkab. Miks on see? Noh, Reacti setState'i meetod ei ole sünkroonne. Taustal otsustab React, millal on kõige parem olekut muuta. Mõnikord on see kohene, mõnikord mitte. Siit ka meie probleem.

Selle probleemi lahendamiseks kutsume setState'i tagasihelistamisel käepideme meetodit, nagu allpool näidatud.

toggleListen () {
  this.setState ({
    kuulamine:! see
  }, this.handleListen)
}

Nüüd saame oma onClicki käitleja lihtsalt võrdsustada selle.toggleListen'iga. Meie soovitud voog (klõpsake → lülita kuula → kuula) on nüüd tagatud!

onClick = {this.toggleListen}

Ülejäänud see õpetus on pühendatud meie käepideme kuulamise meetodi täpsustamisele. Siin on ülevaade sellest, mis meil seni on (sealhulgas mõni CSS). Ärge unustage neid meetodeid siduda!

Käepideme kuulamise meetod:

Alustame käepidemega, mis on allpool toodud kood, mis ütleb meie kõnetuvastusele kuulamise alustamiseks, kui this.state.listening = true.

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

Vahepealsete ja lõplike ärakirjade kogumiseks kasutame kõnetuvastuse sisseehitatud sündmuste käitlejat, mida nimetatakse onresult, nagu on näidatud allpool. Silmuse jaoks mõeldud kood pärineb konkreetselt dokumentidest.

Sel hetkel, kui klõpsate nuppu, peaks teil olema võimalik näha vahepealseid ja lõplikke ärakirju, mis räägivad neid divs.

Kui mängite sellega natuke ringi, märkate, et kõnetuvastus lõpeb iga korraliku kõnepausi ajal iseseisvalt. Seda me ei taha. Mis siis, kui kasutajal on vaja mõtlemiseks mõni sekund?

Kõnetuvastuse saab pidevaks kuulamiseks ära meelitada, mängides koos teiste sisseehitatud sündmuste kuulajatega. Täpsemalt, võime helistada tunnustamiseks.start uuesti äratundmise piires.saame uuesti kuulama, kui see otsustab ise lõppeda.

Lõpuks, kõnetuvastuse peatamiseks, lisame lihtsalt muu lause, mis kutsub tunnustamist.end, kui see.state.listening = vale.

Ülaltoodud koodiga, kui see.state.listening = true, kuid kõnetuvastus otsustab kuulamise lõpetada, manipuleeritakse selle uuesti kuulamiseks (muahaha!). Proovi! See kuradi asi jätkub kuulamist seni, kuni klõpsate seda nuppu enamjaolt. Kahjuks aegub see lõpuks umbes umbes 5 minuti pärast. Kui vajate tõesti kauem kui 5 minutit, võite sellest probleemist mööda pääseda, mängides koos sündmuse kuulajatega ja lisades kohalikku osariiki muid kontrollitud andmeid.

Kõnetuvastuse lõpetamine häälkäskluste abil

Mis siis, kui soovite kõnetuvastuse peatada klõpsamise asemel häälkäskluse abil? Ütleme nii, et soovite, et pärast sõnade „stopp” ja „kuulamine” üksteise järel lakkab kuulamast. Peate lihtsalt lõpetanud lõpliku ärakirja jagama sõnade hulgaks ja kui selle massiivi kaks viimast sõna on “stop” ja “kuulamine”, siis helistage tunnustamine.stop. Seejärel saate massiivist eemaldada sõnad “stopp” ja “kuulamine”, et saada lõpptekst, mis ei sisalda fraasi “lõpetage kuulamine”.

Kui tegemist on lõpliku ärakirjaga, on see üldiselt massiiviga manipuleerimise mäng. Selle konkreetse häälkäskluse näite kohta leiate lisateavet jaotisest „- KÄSklused”.

Märkus lõpliku sisu kohta: lisasin allolevad console.log väljavõtted, et aidata kõnetuvastustegevust jälgida.

  • Kui kuulete nuppu, logitakse “Kuulamine!” Sisse ja see hakkab kuulama.
  • „… Jätka kuulamist…” logitakse sisse, kui kõnetuvastusega manipuleeritakse taaskäivitamiseks pärast iseseisvat peatumist.
  • Kui peatate kõnetuvastuse klõpsamise teel, logitakse „Stopped per click”.
  • Kui peatate kõnetuvastuse häälkäskluse abil, logitakse „peatatud käsu kohta”.

See on selle õpetuse jaoks! Selle kombinatsiooniga (SpeechRecognition + React) saate teha veel palju muud, näiteks muuta nupu värvi või renderdada kuulamise ajal mõne muu komponendi.

Ükskõik, mida teete, nautige seda!