Ohjelmointi

JavaScript-opetusohjelma: Lisää puheentunnistus verkkosovellukseesi

Selaimet etenevät kohti puheentunnistuksen ja futuristisempien ominaisuuksien tukemista, mutta verkkosovellusten kehittäjät rajoittuvat yleensä näppäimistöön ja hiireen. Mutta entä jos voisimme lisätä näppäimistön ja hiiren vuorovaikutusta muiden vuorovaikutustapojen, kuten äänikomentojen tai käden asentojen kanssa?

Tässä viestisarjassa rakennamme peruskarttaominaisuuden multimodaalisilla vuorovaikutuksilla. Ensimmäisenä ovat äänikomennot. Meidän on kuitenkin ensin määriteltävä sovelluksemme rakenne, ennen kuin voimme sisällyttää komentoja.

Sovelluksemme on käynnistetty luoda-reagoida-sovellus, tulee olemaan koko näytön kartta, joka toimii Leaflet.js: n React-komponenttien avulla. Juoksun jälkeen luoda-reagoida-sovellus, lanka lisää esiteja lanka lisää reaktioseloste, avaamme Sovellus komponentti ja määritä meidän Kartta komponentti:

tuo React, {Component} reaktiosta;

tuo {Map, TileLayer} reaktiolehdestä

tuonti './App.css';

luokan sovellus laajentaa komponenttia {

osavaltio = {

keskellä: [41.878099, -87.648116],

zoomaus: 12,

  };

updateViewport = (näkymä) => {

this.setState ({

keskellä: viewport.center,

zoomaus: viewport.zoom,

    });

  };

tehdä () {

const {

keskusta,

Zoomaus,

} = tämä.tila;

paluu (

tyyli = {{korkeus: '100%', leveys: '100%'}}

keskusta = {keskusta}

zoom = {zoom}

onViewportChange = {this.updateViewport}>

url = "// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png"

attribution = "© OpenStreetMap-avustajat"

          />

    )

  }

}

vie oletussovellus;

Sovellus komponentti on tilallinen komponentti, joka seuraa keski- ja zoomausominaisuuksia ja siirtää ne komponenttiin Kartta komponentti. Kun käyttäjä on vuorovaikutuksessa karttojen kanssa sisäänrakennetun hiiren ja näppäimistön kanssa, ilmoitamme tilamme päivittämisestä uudella keski- ja zoomaustasolla.

Kun koko näytön komponentti on määritetty, sovelluksemme näyttää tältä:

Alusta alkaen saamme tyypilliset vuorovaikutustilat, mukaan lukien hiiri, näppäimistö ja kosketus laitteita, jotka tukevat niitä. Kun perusvuorovaikutuksemme ja käyttöliittymämme on määritelty, lisätään lähentämiseen ja loitontamiseen äänikomennot.

On olemassa monia kirjastoja puheentunnistuksen suorittamiseksi selaimessa. Siellä on jopa SpeechDetection-perussovellusliittymä, jota Chrome tukee. Käytämme annyangia, suosittua ja yksinkertaista JavaScript-tekstintunnistuskirjastoa. Annyangin avulla määrität komennot ja niiden käsittelijät JavaScript-objektissa, kuten:

const-komennot = {

'in': () => console.log ('komento vastaanotettu'),

'out': () => console.log ('out-komento vastaanotettu'),

};

Sitten sinun tarvitsee vain siirtää kohde objektissa olevaan menetelmään annyang esine ja soita alkaa() esineelle. Täydellinen esimerkki näyttää tältä:

tuoda annyangia 'annyangista';

const-komennot = {

'in': () => console.log ('komento vastaanotettu'),

'out': () => console.log ('out-komento vastaanotettu'),

};

annyang.addCommands (komennot);

annyang.start ();

Tämä on erittäin yksinkertaista, mutta asiayhteydestä poiketen ei ole paljon järkeä, joten sisällytetään se React-komponenttiimme. Sisällä componentDidMount koukku, lisäämme komentomme ja aloitamme kuuntelun, mutta sen sijaan, että kirjautumme konsoliin, kutsumme kahta tapaa, jotka päivittävät zoomaustason tilassamme:

  zoomIn = () => {

this.setState ({

zoomaus: tämä. valtion. zoomaus + 1

    });

  };

zoomOut = (... argumentti) => {

this.setState ({

zoomaus: tämä. valtion zoomaus - 1

    });

  };

componentDidMount () {

annyang.addCommands ({

'sisään': this.zoomIn,

'out': this.zoomOut,

    });

annyang.start ();

  }

Kun sivumme päivittyy, selain pyytää meiltä lupaa käyttää mikrofonia. Jos sanot kyllä, voit nyt lähentää ja loitontaa äänikomentoja "sisään" ja "ulos". Haluta lisää? Ansang-kirjasto tukee myös paikkamerkkejä ja säännöllisiä lausekkeita. Tukemaan zoomausta suoraan tietylle tasolle voimme määrittää seuraavanlaisen komennon:

  annyang.addCommands ({

/ * olemassa olevat komennot * /

'zoomaustaso: taso': {regexp: / ^ zoomaustaso (\ d +) /, takaisinsoitto: this.zoomTo},

    });

:taso se on osa avainta on tavanomainen tapa määrittää yhden sanan paikkamerkki. (Jos halusimme useita maailman paikkamerkkejä, voisimme käyttää *taso sen sijaan.) Oletusarvon mukaan paikkamerkin siepattu sana välitetään merkkijonona argumenttina käsittelijä-funktiolle. Mutta jos määritellään käsittelijä objektiksi, jolla regex ja soita takaisin avaimet, voimme edelleen rajoittaa mitä paikkamerkki voi olla. Tässä tapauksessa rajoitamme paikkamerkin vain numeroihin. Paikkamerkki lähetetään edelleen merkkijonona, joten meidän on pakotettava se numeroksi, kun asetamme zoomaustason:

  zoomTo = (zoomLevel) => {

this.setState ({

zoomaus: + zoomaustaso,

    });

  }

Ja siinä se! Voimme nyt zoomata yhden tason kerrallaan tai hypätä suoraan tasolle sanomalla sen numeron. Jos pelaat tätä kotona, huomaat, että annyangin rekisteröiminen kestää muutaman sekunnin, ja joskus komentoja ei rekisteröidä. Puheentunnistus ei ole täydellinen. Jos rakennat puheentunnistuksen tuotantojärjestelmään, sinun on sisällytettävä reaaliaikaiset virheiden palautemekanismit tai tunnistettava, milloin kirjasto kuuntelee aktiivisesti.

Jos haluat pelata koodilla, löydät sen GitHubista. Voit vapaasti ottaa yhteyttä Twitteriin jakamaan omat multimodaaliset käyttöliittymät: @freethejazz.