Výukový program pre JavaScript: Pridajte do svojej webovej aplikácie rozpoznávanie reči

Zatiaľ čo prehliadače smerujú k podpore rozpoznávania reči a futuristickejším možnostiam, vývojári webových aplikácií sú zvyčajne viazaní na klávesnicu a myš. Čo by sa však stalo, keby sme mohli rozšíriť interakciu klávesnice a myši s inými režimami interakcie, ako sú hlasové príkazy alebo polohy rúk?

V tejto sérii príspevkov vytvoríme základný prieskumník máp s multimodálnymi interakciami. Najskôr na rade sú hlasové príkazy. Predtým, ako začleníme akékoľvek príkazy, najskôr však musíme rozložiť štruktúru našej aplikácie.

Naša aplikácia, bootstrapovaná s create-react-app, bude mapa na celú obrazovku poháňaná komponentami React pre Leaflet.js. Po spustení create-react-app, priadza pridať letáka priadza pridať reakčný leták, otvoríme našu App komponent a definovať náš Mapa zložka:

importovať Reagovať, {Komponent} z 'reagovať';
importovať {Map, TileLayer} z 'reaktívneho letáku'
import './App.css';
trieda App rozširuje komponent {
  stav = {
  stred: [41.878099, -87,648116],
  zväčšenie: 12,
  };
  updateViewport = (výrez) => {
  this.setState ({
  stred: viewport.center,
  zväčšenie: viewport.zoom,
    });
  };
  render () {
  konšt {
  centrum,
  zväčšiť,
  } = this.state;
  návrat (
  style = {{height: '100%', width: '100%'}}
  center = {center}
  zoom = {zoom}
  onViewportChange = {this.updateViewport}>
  url = "// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png"
  attribution = "© prispievatelia OpenStreetMap"
          />
    )
  }
}
exportovať predvolenú aplikáciu;

The App komponent je stavový komponent, ktorý sleduje vlastnosti stredu a zväčšenia a prenáša ich do Mapa zložka. Keď používateľ interaguje s mapami prostredníctvom zabudovaných interakcií myši a klávesnice, sme upozornení, aby sme aktualizovali náš stav o nový stred a úrovne priblíženia.

S definovaným komponentom na celú obrazovku vyzerá naša aplikácia takto:

Po vybalení z krabice dostaneme typické režimy interakcie vrátane myši, klávesnice a dotyku na zariadeniach, ktoré ich podporujú. Keď už máme definované naše základné interakcie a používateľské rozhranie, pridajme si hlasové príkazy na priblíženie a oddialenie.

Existuje veľa knižníc, ktoré umožňujú rozpoznávanie reči v prehliadači. Prehliadač Chrome podporuje dokonca aj základné rozhranie SpeechDetection API. Použijeme annyang, populárnu a jednoduchú knižnicu na detekciu textu v jazyku JavaScript. S annyang definujete príkazy a ich obslužné rutiny v objekte JavaScript, napríklad takto:

const príkazy = {
  'in': () => console.log ('in command received'),
  'out': () => console.log ('prijatý príkaz out'),
};

Potom všetko, čo musíte urobiť, je preniesť tento objekt do metódy na annyang namietať a volať štart () na tom objekte. Celý príklad vyzerá takto:

importovať annyang z „annyang“;
const príkazy = {
  'in': () => console.log ('in command received'),
  'out': () => console.log ('prijatý príkaz out'),
};
annyang.addCommands (príkazy);
annyang.start ();

Je to super jednoduché, ale vytrhnuté z kontextu nedáva veľký zmysel, tak to začleňme do našej zložky React. V rámci componentDidMount hák, pridáme naše príkazy a začneme počúvať, ale namiesto prihlásenia do konzoly zavoláme dve metódy, ktoré aktualizujú úroveň priblíženia v našom stave:

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

Keď sa naša stránka obnoví, prehľadávač nás požiada o povolenie používať mikrofón. Ak poviete áno, budete odteraz môcť pomocou priblíženia a oddialenia pomocou hlasových príkazov „in“ a „out“. Chcieť viac? Knižnica v Annyangu podporuje zástupné symboly a regulárne výrazy. Aby sme podporili priblíženie priamo na určitú úroveň, môžeme definovať príkaz takto:

  annyang.addCommands ({
  / * existujúce príkazy * /
  'level level: level': {regexp: / ^ level zoom (\ d +) /, callback: this.zoomTo},
    });

The : úroveň súčasťou kľúča je štandardný spôsob definovania jednoslovného zástupného symbolu. (Ak by sme chceli zástupný symbol pre viac svetov, mohli by sme použiť * úroveň Namiesto toho.) Predvolene sa slovo zachytené zástupným znakom odovzdáva ako argument reťazca do funkcie obsluhy. Ale ak definujeme obslužný program ako objekt s regulárny výraz a zavolaj späť kľúče, môžeme ďalej obmedziť, aký môže byť zástupný symbol. V takom prípade obmedzíme zástupný symbol iba na číslice. Tento zástupný symbol bude naďalej odovzdaný ako reťazec, takže keď nastavíme úroveň priblíženia, budeme ho musieť vynútiť na číslo:

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

A to je všetko! Teraz môžeme priblížiť alebo oddialiť jednu úroveň po druhej, alebo môžeme preskočiť priamo na úroveň vyslovením jej čísla. Ak sa s tým hráte doma, všimnete si, že registrácia príkazu annyang trvá niekoľko sekúnd a niekedy sa príkazy nezaregistrujú. Rozpoznávanie reči nie je dokonalé. Ak integrujete rozpoznávanie reči do produkčného systému, mali by ste začleniť mechanizmy spätnej väzby chýb v reálnom čase alebo zistiť, kedy knižnica aktívne počúva.

Ak sa chcete s kódom pohrať, nájdete ho na GitHub. Neváhajte a zdieľajte svoje vlastné multimodálne rozhrania na Twitteri: @freethejazz.