Programmering

JavaScript-tutorial: Føj talegenkendelse til din webapp

Mens browsere marcherer mod at understøtte talegenkendelse og mere futuristiske muligheder, er webapplikationsudviklere typisk begrænset til tastatur og mus. Men hvad hvis vi kunne udvide tastatur- og musevirkninger med andre former for interaktion, f.eks. Stemmekommandoer eller håndpositioner?

I denne række indlæg opbygger vi en grundlæggende kortudforsker med multimodale interaktioner. Først op er stemmekommandoer. Vi skal dog først lægge strukturen i vores app, før vi kan inkorporere kommandoer.

Vores app, bootstrapped med Opret-reager-app, vil være et fuldskærmskort, der drives af React-komponenterne til Leaflet.js. Efter løb Opret-reager-app, garn tilføj folderog garn tilføj reaktionsfolder, vi åbner vores App komponent og definer vores Kort komponent:

import React, {Component} fra 'react';

importer {Map, TileLayer} fra 'react-folder'

import './App.css';

klasse App udvider komponent {

tilstand = {

center: [41.878099, -87.648116],

zoom: 12,

  };

updateViewport = (viewport) => {

this.setState ({

center: viewport.center,

zoom: viewport.zoom,

    });

  };

gengive () {

const {

centrum,

zoom,

} = denne tilstand.

Vend tilbage (

stil = {{højde: '100%', bredde: '100%'}}

center = {center}

zoom = {zoom}

onViewportChange = {this.updateViewport}>

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

attribution = "© OpenStreetMap-bidragydere"

          />

    )

  }

}

eksport af standardapp;

Det App komponent er en stateful komponent, der holder styr på center- og zoomegenskaberne og overfører dem til Kort komponent. Når brugeren interagerer med kortene via den indbyggede interaktion med mus og tastatur, får vi besked om at opdatere vores tilstand med det nye center- og zoomniveau.

Med en fuldskærmskomponent defineret ser vores app ud som følger:

Uden for kassen får vi de typiske interaktionsmetoder, herunder mus, tastatur og berøring af enheder, der understøtter dem. Med vores grundlæggende interaktioner og brugergrænseflade defineret, lad os tilføje stemmekommandoer for at zoome ind og ud.

Der er mange biblioteker til rådighed til at udføre talegenkendelse i browseren. Der er endda en base SpeechDetection API understøttet af Chrome. Vi bruger annyang, et populært og simpelt JavaScript-tekstbibliotek. Med annyang definerer du kommandoer og deres håndterere i et JavaScript-objekt som sådan:

const kommandoer = {

'in': () => console.log ('i kommando modtaget'),

'ud': () => konsol.log ('udkommando modtaget'),

};

Derefter er alt hvad du skal gøre, at sende objektet til en metode på annyang gør indsigelse og kald Start() på det objekt. Et komplet eksempel ser sådan ud:

import annyang fra 'annyang';

const kommandoer = {

'in': () => console.log ('i kommando modtaget'),

'ud': () => konsol.log ('udkommando modtaget'),

};

annyang.addCommands (kommandoer);

annyang.start ();

Dette er super simpelt, men ud af kontekst giver ikke meget mening, så lad os inkorporere det i vores React-komponent. Indenfor componentDidMount krog, vi tilføjer vores kommandoer og begynder at lytte, men i stedet for at logge på konsollen kalder vi to metoder, der opdaterer zoomniveauet i vores tilstand:

  zoomIn = () => {

this.setState ({

zoom: this.state.zoom + 1

    });

  };

zoomOut = (... args) => {

this.setState ({

zoom: this.state.zoom - 1

    });

  };

componentDidMount () {

annyang.addCommands ({

'in': this.zoomIn,

'ud': this.zoomOut,

    });

annyang.start ();

  }

Når vores side opdateres, beder browseren os om tilladelse til at bruge mikrofonen. Hvis du siger ja, kan du nu bruge stemmekommandoer "ind" og "ud" til at zoome ind og ud. Ønsker mere? Annyang-biblioteket understøtter også pladsholdere og regulære udtryk. For at understøtte zoom direkte til et bestemt niveau kan vi definere en kommando som sådan:

  annyang.addCommands ({

/ * eksisterende kommandoer * /

'zoomniveau: niveau': {regexp: / ^ zoomniveau (\ d +) /, tilbagekald: dette.zoomTo},

    });

Det :niveau det er en del af nøglen er standardmetoden til at definere en enkeltords pladsholder. (Hvis vi ville have en pladsholder i flere verdener, kunne vi bruge *niveau i stedet.) Som standard sendes ordet, der er fanget af pladsholderen, ind som et strengargument til behandlerfunktionen. Men hvis vi definerer handler som et objekt med regex og ring tilbage nøgler, kan vi yderligere begrænse, hvad pladsholderen kan være. I dette tilfælde begrænser vi pladsholderen til kun cifre. Denne pladsholder vil stadig blive sendt som en streng, så vi bliver nødt til at tvinge den til et nummer, når vi indstiller zoomniveauet:

  zoomTo = (zoomLevel) => {

this.setState ({

zoom: + zoomLevel,

    });

  }

Og det er det! Vi kan nu zoome ind eller ud et niveau ad gangen, eller vi kan springe direkte til et niveau ved at sige dets nummer. Hvis du leger med dette derhjemme, vil du bemærke, at det tager et par sekunder for annyang at registrere kommandoen, og nogle gange bliver kommandoer ikke registreret. Talegenkendelse er ikke perfekt. Hvis du bygger talegenkendelse i et produktionssystem, vil du gerne integrere feedback-mekanismer i realtid for fejl eller identificere, hvornår biblioteket aktivt lytter.

Hvis du vil lege med koden, kan du finde den på GitHub. Du er velkommen til at kontakte Twitter for at dele dine egne multimodale grænseflader: @freethejazz.