JavaScript-Tutorial: Fügen Sie Ihrer Web-App Spracherkennung hinzu

Während Browser auf die Unterstützung der Spracherkennung und futuristischerer Funktionen hinarbeiten, sind Webanwendungsentwickler in der Regel auf Tastatur und Maus beschränkt. Aber was wäre, wenn wir die Interaktion von Tastatur und Maus mit anderen Interaktionsmodi wie Sprachbefehlen oder Handpositionen erweitern könnten?

In dieser Reihe von Beiträgen bauen wir einen grundlegenden Karten-Explorer mit multimodalen Interaktionen auf. An erster Stelle stehen Sprachbefehle. Wir müssen jedoch zuerst die Struktur unserer App festlegen, bevor wir Befehle einbinden können.

Unsere App, mit create-react-appder gebootet wird, wird eine Vollbildkarte sein, die von den React-Komponenten für Leaflet.js unterstützt wird. Nach dem Ausführen von create-react-app, yarn add leafletund yarn add react-leafletöffnen wir unsere AppKomponente und definieren unsere MapKomponente:

importiere React, {Component} von 'react';

{Map, TileLayer} aus 'React-Leaflet' importieren

import './App.css';

Klasse App erweitert Komponente {

  state = {

    Mitte: [41.878099, -87.648116],

    Zoom: 12,

  };

  updateViewport = (Ansichtsfenster) => {

    this.setState ({

      Mitte: viewport.center,

      zoom: viewport.zoom,

    });

  };

  render () {

    const {

      Center,

      Zoomen,

    } = this.state;

    Rückkehr (

          style = {{height: '100%', width: '100%'}}

          center = {center}

          zoom = {zoom}

          onViewportChange = {this.updateViewport}>

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

            attribution = "© OpenStreetMap-Mitwirkende"

          />

    )

  }}

}}

Standard-App exportieren;

Die AppKomponente ist eine zustandsbehaftete Komponente, die die Mittel- und Zoomeigenschaften verfolgt und an die MapKomponente weitergibt. Wenn der Benutzer über die integrierten Maus- und Tastaturinteraktionen mit den Karten interagiert, werden wir aufgefordert, unseren Status mit den neuen Mittel- und Zoomstufen zu aktualisieren.

Mit einer definierten Vollbildkomponente sieht unsere App folgendermaßen aus:

Standardmäßig erhalten wir die typischen Interaktionsmodi, einschließlich Maus, Tastatur und Touch auf Geräten, die diese unterstützen. Nachdem unsere grundlegenden Interaktionen und Benutzeroberflächen definiert sind, fügen wir Sprachbefehle zum Vergrößern und Verkleinern hinzu.

Es stehen viele Bibliotheken zur Verfügung, um die Spracherkennung im Browser durchzuführen. Es gibt sogar eine von Chrome unterstützte Basis-SpeechDetection-API. Wir werden Annyang verwenden, eine beliebte und einfache JavaScript-Texterkennungsbibliothek. Mit annyang definieren Sie Befehle und ihre Handler in einem JavaScript-Objekt wie folgt:

const-Befehle = {

  'in': () => console.log ('in Befehl empfangen'),

  'out': () => console.log ('out Befehl erhalten'),

};

Dann müssen Sie nur noch dieses Objekt an eine Methode für das annyangObjekt übergeben und start()dieses Objekt aufrufen . Ein vollständiges Beispiel sieht folgendermaßen aus:

importiere annyang aus 'annyang';

const-Befehle = {

  'in': () => console.log ('in Befehl empfangen'),

  'out': () => console.log ('out Befehl erhalten'),

};

annyang.addCommands (Befehle);

annyang.start ();

Das ist super einfach, aber außerhalb des Kontexts macht es nicht viel Sinn. Lassen Sie es uns in unsere React-Komponente integrieren. Innerhalb des componentDidMountHooks fügen wir unsere Befehle hinzu und beginnen zu lauschen. Anstatt uns jedoch an der Konsole anzumelden, rufen wir zwei Methoden auf, mit denen die Zoomstufe in unserem Status aktualisiert wird:

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

  }}

Wenn unsere Seite aktualisiert wird, bittet uns der Browser um Erlaubnis, das Mikrofon verwenden zu dürfen. Wenn Sie "Ja" sagen, können Sie jetzt die Sprachbefehle "rein" und "raus" verwenden, um hinein- und herauszuzoomen. Mehr wollen? Die Annyang-Bibliothek unterstützt auch Platzhalter und reguläre Ausdrücke. Um das direkte Zoomen auf eine bestimmte Ebene zu unterstützen, können wir einen Befehl wie folgt definieren:

    annyang.addCommands ({

      / * vorhandene Befehle * /

      'Zoomstufe: Stufe': {regulärer Ausdruck: / ^ Zoomstufe (\ d +) /, Rückruf: this.zoomTo},

    });

Das :level, was Teil des Schlüssels ist, ist die Standardmethode zum Definieren eines Einzelwort-Platzhalters. (Wenn wir einen Platzhalter für mehrere Welten wünschen, können wir *levelstattdessen einen verwenden.) Standardmäßig wird das vom Platzhalter erfasste Wort als Zeichenfolgenargument an die Handlerfunktion übergeben. Wenn wir den Handler jedoch als Objekt mit regexund mit callbackSchlüsseln definieren, können wir die Position des Platzhalters weiter einschränken. In diesem Fall beschränken wir den Platzhalter auf nur Ziffern. Dieser Platzhalter wird weiterhin als Zeichenfolge übergeben, daher müssen wir ihn beim Festlegen der Zoomstufe auf eine Zahl zwingen:

  zoomTo = (zoomLevel) => {

    this.setState ({

      zoom: + zoomLevel,

    });

  }}

Und das ist es! Wir können jetzt jeweils eine Ebene vergrößern oder verkleinern oder direkt zu einer Ebene springen, indem wir deren Nummer angeben. Wenn Sie zu Hause damit herumspielen, werden Sie feststellen, dass es einige Sekunden dauert, bis annyang den Befehl registriert, und manchmal werden Befehle nicht registriert. Spracherkennung ist nicht perfekt. Wenn Sie die Spracherkennung in ein Produktionssystem einbauen, möchten Sie Echtzeit-Feedback-Mechanismen für Fehler integrieren oder feststellen, wann die Bibliothek aktiv zuhört.

Wenn Sie mit dem Code herumspielen möchten, finden Sie ihn auf GitHub. Wenden Sie sich an Twitter, um Ihre eigenen multimodalen Schnittstellen zu teilen: @freethejazz.