Tutorial JavaScript: aggiungi il riconoscimento vocale alla tua app web

Mentre i browser stanno marciando verso il supporto del riconoscimento vocale e funzionalità più futuristiche, gli sviluppatori di applicazioni Web sono generalmente vincolati alla tastiera e al mouse. E se potessimo aumentare le interazioni di tastiera e mouse con altre modalità di interazione, come i comandi vocali o le posizioni delle mani?

In questa serie di post, costruiremo un esploratore di mappe di base con interazioni multimodali. I primi sono i comandi vocali. Tuttavia, dobbiamo prima definire la struttura della nostra app prima di poter incorporare qualsiasi comando.

La nostra app, avviata con create-react-app, sarà una mappa a schermo intero alimentata dai componenti React per Leaflet.js. Dopo aver eseguito create-react-app, yarn add leaflete yarn add react-leaflet, apriremo il nostro Appcomponente e definiremo il nostro Mapcomponente:

import React, {Component} da 'react';

importa {Map, TileLayer} da "react-leaflet"

import './App.css';

class App estende Component {

  state = {

    centro: [41.878099, -87.648116],

    zoom: 12,

  };

  updateViewport = (viewport) => {

    this.setState ({

      center: viewport.center,

      zoom: viewport.zoom,

    });

  };

  render () {

    const {

      centro,

      Ingrandisci,

    } = this.state;

    ritorno (

          stile = {{altezza: '100%', larghezza: '100%'}}

          center = {center}

          zoom = {zoom}

          onViewportChange = {this.updateViewport}>

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

            attribution = "© collaboratori di OpenStreetMap"

          />

    )

  }

}

esportare l'app predefinita;

Il Appcomponente è un componente stateful che tiene traccia del centro e delle proprietà di zoom, passandole al Mapcomponente. Quando l'utente interagisce con le mappe tramite le interazioni di mouse e tastiera integrate, ci viene notificato di aggiornare il nostro stato con il nuovo centro e i livelli di zoom.

Con un componente a schermo intero definito, la nostra app ha il seguente aspetto:

Fuori dagli schemi, otteniamo le tipiche modalità di interazione tra cui mouse, tastiera e tocco sui dispositivi che le supportano. Con le nostre interazioni di base e l'interfaccia utente definite, aggiungiamo comandi vocali per ingrandire e ridurre.

Sono disponibili molte librerie per eseguire il riconoscimento vocale nel browser. C'è anche un'API SpeechDetection di base supportata da Chrome. Useremo annyang, una popolare e semplice libreria di rilevamento del testo JavaScript. Con annyang, definisci i comandi e i relativi gestori in un oggetto JavaScript, in questo modo:

comandi const = {

  'in': () => console.log ('in comando ricevuto'),

  'out': () => console.log ('comando out ricevuto'),

};

Quindi, tutto ciò che devi fare è passare quell'oggetto in un metodo annyangsull'oggetto e chiamare start()quell'oggetto. Un esempio completo è simile a questo:

importare annyang da "annyang";

comandi const = {

  'in': () => console.log ('in comando ricevuto'),

  'out': () => console.log ('comando out ricevuto'),

};

annyang.addCommands (comandi);

annyang.start ();

Questo è semplicissimo, ma fuori contesto non ha molto senso, quindi incorporiamolo nel nostro componente React. All'interno componentDidMountdell'hook, aggiungeremo i nostri comandi e inizieremo ad ascoltare, ma invece di accedere alla console, chiameremo due metodi che aggiornano il livello di zoom nel nostro stato:

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

  }

Quando la nostra pagina si aggiorna, il browser ci chiede il permesso di utilizzare il microfono. Se dici di sì, ora sarai in grado di utilizzare i comandi vocali "in" e "out" per ingrandire e ridurre. Voglio di più? La libreria annyang supporta anche segnaposto ed espressioni regolari. Per supportare lo zoom direttamente a un livello particolare, possiamo definire un comando in questo modo:

    annyang.addCommands ({

      / * comandi esistenti * /

      'zoom level: level': {regexp: / ^ zoom level (\ d +) /, callback: this.zoomTo},

    });

Quello :levelche fa parte della chiave è il modo standard di definire un segnaposto composto da una sola parola. (Se volessimo un segnaposto a più mondi, potremmo usarlo *level.) Per impostazione predefinita, la parola catturata dal segnaposto viene passata come argomento di stringa alla funzione del gestore. Ma se definiamo il gestore come un oggetto con le chiavi regexe callback, possiamo vincolare ulteriormente ciò che può essere il segnaposto. In questo caso, limitiamo il segnaposto alle sole cifre. Quel segnaposto verrà comunque passato come stringa, quindi dovremo forzarlo a un numero quando impostiamo il livello di zoom:

  zoomTo = (zoomLevel) => {

    this.setState ({

      zoom: + zoomLevel,

    });

  }

E questo è tutto! Ora possiamo ingrandire o rimpicciolire un livello alla volta, oppure possiamo saltare direttamente a un livello pronunciandone il numero. Se stai giocando con questo a casa, noterai che ci vogliono alcuni secondi perché annyang registri il comando, e talvolta i comandi non vengono registrati. Il riconoscimento vocale non è perfetto. Se stai incorporando il riconoscimento vocale in un sistema di produzione, ti consigliamo di incorporare meccanismi di feedback in tempo reale per gli errori o di identificare quando la libreria è in ascolto attivo.

Se vuoi giocare con il codice, puoi trovarlo su GitHub. Sentiti libero di contattare Twitter per condividere le tue interfacce multimodali: @freethejazz.