JavaScript-opplæring: Legg til talegjenkjenning i nettappen din

Mens nettlesere marsjerer mot å støtte talegjenkjenning og mer futuristiske evner, er utviklere av webapplikasjoner vanligvis begrenset til tastatur og mus. Men hva om vi kunne utvide tastatur- og musevirkninger med andre moduser for interaksjon, som stemmekommandoer eller håndposisjoner?

I denne innleggsserien bygger vi opp en grunnleggende kartutforsker med multimodale interaksjoner. Først er talekommandoer. Vi må imidlertid først legge opp strukturen til appen vår før vi kan innlemme kommandoer.

Vår app, bootstrapped med create-react-app, vil være et fullskjermskart drevet av React-komponentene for Leaflet.js. Etter å ha løpt create-react-app, garn legg til brosjyre, og garn legg til reaksjonsblad, åpner vi vår App komponent og definere vår Kart komponent:

importer React, {Component} fra 'react';
importer {Map, TileLayer} fra 'react-folder'
importere './App.css';
klasse App utvider komponent {
  tilstand = {
  sentrum: [41,878099, -87,648116],
  zoom: 12,
  };
  updateViewport = (viewport) => {
  this.setState ({
  senter: viewport.center,
  zoom: viewport.zoom,
    });
  };
  gjengi () {
  const {
  senter,
  zoom,
  } = denne tilstanden;
  komme tilbake (
  stil = {{høyde: '100%', bredde: '100%'}}
  sentrum = {sentrum}
  zoom = {zoom}
  onViewportChange = {this.updateViewport}>
  url = "// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png"
  attribution = "© OpenStreetMap bidragsytere"
          />
    )
  }
}
eksporter standardapp;

De App komponent er en stateful komponent som holder oversikt over senter- og zoomegenskapene og overfører dem til Kart komponent. Når brukeren samhandler med kartene via den innebygde interaksjonen mellom mus og tastatur, får vi beskjed om å oppdatere tilstanden vår med det nye senter- og zoomnivået.

Med en fullskjermkomponent definert, ser appen vår ut som følgende:

Uten boksen får vi de typiske modusene for interaksjon, inkludert mus, tastatur og berøring av enheter som støtter dem. Med våre grunnleggende interaksjoner og brukergrensesnitt definert, la oss legge til talekommandoer for å zoome inn og ut.

Det er mange biblioteker tilgjengelig for å utføre talegjenkjenning i nettleseren. Det er til og med en base SpeechDetection API støttet av Chrome. Vi bruker annyang, et populært og enkelt JavaScript-tekstbibliotek. Med annyang definerer du kommandoer og deres håndtere i et JavaScript-objekt, slik:

const-kommandoer = {
  'in': () => console.log ('i kommando mottatt'),
  'out': () => console.log ('out command received'),
};

Så er alt du trenger å gjøre å sende objektet til en metode på annyang innvende og ring start() på den gjenstanden. Et fullstendig eksempel ser slik ut:

importere annyang fra 'annyang';
const-kommandoer = {
  'in': () => console.log ('i kommando mottatt'),
  'out': () => console.log ('out command received'),
};
annyang.addCommands (kommandoer);
annyang.start ();

Dette er superenkelt, men utenfor kontekst gir ikke mye mening, så la oss innlemme det i vår React-komponent. Innen componentDidMount krok, vi legger til kommandoene og begynner å lytte, men i stedet for å logge på konsollen, vil vi kalle to metoder som oppdaterer zoomnivået i vår tilstand:

  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 ();
  }

Når siden vår oppdateres, ber nettleseren oss om tillatelse til å bruke mikrofonen. Hvis du sier ja, vil du nå kunne bruke talekommandoer “inn” og “ut” for å zoome inn og ut. Ønsker mer? Annyang-biblioteket støtter også plassholdere og vanlige uttrykk. For å støtte zooming direkte til et bestemt nivå, kan vi definere en kommando slik:

  annyang.addCommands ({
  / * eksisterende kommandoer * /
  'zoom level: level': {regexp: / ^ zoom level (\ d +) /, callback: this.zoomTo},
    });

De :nivå det er en del av nøkkelen er den vanlige måten å definere en enkeltords plassholder på. (Hvis vi ønsket flere verdensplassholdere, kunne vi bruke det *nivå i stedet.) Som standard sendes ordet som er fanget av plassholderen inn som et strengargument til behandlerfunksjonen. Men hvis vi definerer handler som et objekt med regex og Ring tilbake nøkler, kan vi ytterligere begrense hva plassholderen kan være. I dette tilfellet begrenser vi plassholderen til bare sifre. Denne plassholderen vil fremdeles sendes inn som en streng, så vi må tvinge den til et tall når vi stiller inn zoomnivået:

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

Og det er det! Vi kan nå zoome inn eller ut ett nivå om gangen, eller vi kan hoppe direkte til et nivå ved å si tallet. Hvis du leker med dette hjemme, vil du legge merke til at det tar noen sekunder for annyang å registrere kommandoen, og noen ganger blir ikke kommandoer registrert. Talegjenkjenning er ikke perfekt. Hvis du bygger talegjenkjenning i et produksjonssystem, vil du innlemme tilbakemeldingsmekanismer i sanntid for feil eller å identifisere når biblioteket lytter aktivt.

Hvis du vil leke med koden, kan du finne den på GitHub. Ta gjerne kontakt på Twitter for å dele dine egne multimodale grensesnitt: @freethejazz.