Vadnica za JavaScript: v spletno aplikacijo dodajte prepoznavanje govora

Medtem ko brskalniki korakajo k podpori prepoznavanja govora in bolj futurističnim zmožnostim, so razvijalci spletnih aplikacij običajno omejeni na tipkovnico in miško. Kaj pa, če bi lahko interakcije tipkovnice in miške povečali z drugimi načini interakcije, na primer z glasovnimi ukazi ali položaji rok?

V tej seriji objav bomo zgradili osnovni raziskovalec zemljevidov z multimodalnimi interakcijami. Najprej so glasovni ukazi. Najprej pa bomo morali predstaviti strukturo naše aplikacije, preden bomo lahko vključili kakršne koli ukaze.

Naša aplikacija, zagnana z ustvariti-reagirati-app, bo celozaslonski zemljevid, ki ga poganjajo komponente React za Leaflet.js. Po teku ustvariti-reagirati-app, preja dodajte letak, in preja dodajte reakcijski listič, odprli bomo svoje App komponento in določite našo Zemljevid komponenta:

uvoz React, {Component} iz 'Reagiraj';
uvozi {Map, TileLayer} iz 'odziv-letaka'
uvoz './App.css';
class App razširja Component {
  stanje = {
  sredina: [41.878099, -87.648116],
  povečava: 12,
  };
  updateViewport = (pogled) => {
  this.setState ({
  center: viewport.center,
  povečava: viewport.zoom,
    });
  };
  render () {
  const {
  center,
  povečava,
  } = this.state;
  vrnitev (
  style = {{višina: '100%', širina: '100%'}}
  center = {center}
  povečava = {povečava}
  onViewportChange = {this.updateViewport}>
  url = "// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png"
  attribution = "© sodelavci OpenStreetMap"
          />
    )
  }
}
izvoz privzete aplikacije;

The App komponenta je komponenta s stanjem, ki spremlja lastnosti središča in povečave ter jih posreduje v Zemljevid komponenta. Ko uporabnik sodeluje z zemljevidi prek vgrajene interakcije z miško in tipkovnico, smo obveščeni, da posodobimo svoje stanje z novimi središčami in stopnjami povečave.

Z definirano celozaslonsko komponento je naša aplikacija videti tako:

Na voljo so tipični načini interakcije, vključno z miško, tipkovnico in dotikom na napravah, ki jih podpirajo. Z našimi osnovnimi interakcijami in uporabniškim vmesnikom smo dodali glasovne ukaze za povečavo in pomanjšanje.

Na voljo je veliko knjižnic za izvajanje prepoznavanja govora v brskalniku. Obstaja celo osnovni API za govor SpeechDetection, ki ga podpira Chrome. Uporabili bomo annyang, priljubljeno in preprosto knjižnico za zaznavanje besedila JavaScript. Z annyang definirate ukaze in njihove upravljavce v objektu JavaScript, takole:

ukazi const = {
  'in': () => console.log ('v prejetem ukazu'),
  'out': () => console.log ('prejeti ukaz out'),
};

Nato vse, kar morate storiti, je, da ta predmet prenesete v metodo na annyang predmet in klic začetek () na tem predmetu. Celoten primer je videti tako:

uvoz annyang iz 'annyang';
ukazi const = {
  'in': () => console.log ('v prejetem ukazu'),
  'out': () => console.log ('prejeti ukaz out'),
};
annyang.addCommands (ukazi);
annyang.start ();

To je zelo preprosto, vendar izven konteksta nima veliko smisla, zato ga vključimo v našo komponento React. Znotraj componentDidMount kavelj, dodali bomo ukaze in začeli poslušati, vendar bomo namesto prijave v konzolo poklicali dva načina, ki posodabljata stopnjo povečave v našem stanju:

  zoomIn = () => {
  this.setState ({
  povečava: this.state.zoom + 1
    });
  };
  zoomOut = (... args) => {
  this.setState ({
  povečava: this.state.zoom - 1
    });
  };
  componentDidMount () {
  annyang.addCommands ({
  'in': this.zoomIn,
  'out': this.zoomOut,
    });
  annyang.start ();
  }

Ko se naša stran osveži, nas brskalnik prosi za dovoljenje za uporabo mikrofona. Če odgovorite pritrdilno, boste lahko zdaj uporabljali glasovne ukaze "vhod" in "pomanjševanje" za povečavo in pomanjšanje. Želijo več? Knjižnica annyang podpira tudi ograde in regularne izraze. Za podporo neposrednega povečevanja na določeno raven lahko določimo ukaz takole:

  annyang.addCommands ({
  / * obstoječi ukazi * /
  'stopnja povečave: raven': {regexp: / ^ stopnja povečave (\ d +) /, povratni klic: this.zoomTo},
    });

The : nivo to je del ključa, je standardni način določanja enobesednega nadomestnega znaka. (Če bi želeli več svetovnih ograd, bi lahko uporabili * nivo namesto tega.) Privzeto se beseda, zajeta z nadomestnim znakom, kot argument niza prenese v funkcijo obdelovalca. Če pa upravljavca opredelimo kot objekt z regularni izraz in poklicati nazaj tipke, lahko dodatno omejimo, kakšen je lahko nadomestni znak. V tem primeru omejimo nadomestni znak na samo števke. Ta nadomestni znak bo še vedno posredovan kot niz, zato ga bomo morali prisiliti na številko, ko bomo nastavili stopnjo povečave:

  zoomTo = (zoomLevel) => {
  this.setState ({
  zoom: + zoomLevel,
    });
  }

In to je to! Zdaj lahko naenkrat povečamo ali pomanjšamo eno raven ali pa preskočimo neposredno na raven tako, da izgovorimo njeno številko. Če se s tem igrate doma, boste opazili, da traja nekaj sekund, da annyang registrira ukaz, včasih pa se ukazi ne registrirajo. Prepoznavanje govora ni popolno. Če v produkcijski sistem vgrajujete prepoznavanje govora, boste želeli vklopiti sprotne mehanizme povratnih informacij za napake ali ugotoviti, kdaj knjižnica aktivno posluša.

Če se želite poigrati s kodo, jo lahko najdete na GitHub. Prosto se obrnite na Twitter in delite svoje multimodalne vmesnike: @freethejazz.