Tutorial JavaScript: Tambahkan pengecaman pertuturan ke aplikasi web anda

Walaupun penyemak imbas bergerak ke arah menyokong pengecaman pertuturan dan kemampuan yang lebih futuristik, pembangun aplikasi web biasanya terkena papan kekunci dan tetikus. Tetapi bagaimana jika kita dapat meningkatkan interaksi papan kekunci dan tetikus dengan mod interaksi lain, seperti perintah suara atau kedudukan tangan?

Dalam siri catatan ini, kami akan membina peneroka peta asas dengan interaksi multimodal. Yang pertama adalah arahan suara. Namun, pertama-tama kita perlu menyusun struktur aplikasi kita sebelum kita dapat memasukkan sebarang perintah.

Aplikasi kami, yang create-react-appdisertakan dengan boot , akan menjadi peta skrin penuh yang dikuasakan oleh komponen React untuk Leaflet.js. Setelah berjalan create-react-app, yarn add leafletdan yarn add react-leaflet, kami akan membuka Appkomponen kami dan menentukan Mapkomponen kami :

import React, {Component} dari 'react';

import {Map, TileLayer} dari 'react-leaflet'

import './App.css';

aplikasi kelas meluaskan Komponen {

  negeri = {

    pusat: [41.878099, -87.648116],

    zoom: 12,

  };

  kemas kiniViewport = (viewport) => {

    ini.setState ({

      pusat: viewport.center,

      zum: viewport.zoom,

    });

  };

  memberikan () {

    buruh {

      pusat,

      zum,

    } = negeri ini;

    kembali (

          gaya = {{tinggi: '100%', lebar: '100%'}}

          pusat = {pusat}

          zum = {zoom}

          onViewportChange = {this.updateViewport}>

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

            atribusi = "© penyumbang OpenStreetMap"

          />

    )

  }

}

eksport aplikasi lalai;

The Appkomponen adalah komponen stateful yang menjejaki pusat dan zoom sifat-sifat, lulus mereka ke dalam Mapkomponen. Apabila pengguna berinteraksi dengan peta melalui interaksi tetikus dan papan kekunci yang terpasang, kami diberitahu untuk mengemas kini keadaan kami dengan pusat dan tahap zoom yang baru.

Dengan komponen skrin penuh yang ditentukan, aplikasi kami kelihatan seperti berikut:

Di luar kotak, kami mendapat mod interaksi khas termasuk tetikus, papan kekunci, dan sentuhan pada peranti yang menyokongnya. Dengan interaksi asas dan antara muka pengguna kami yang ditentukan, mari tambahkan perintah suara untuk memperbesar dan memperkecil.

Terdapat banyak perpustakaan yang tersedia untuk melakukan pengecaman pertuturan di penyemak imbas. Bahkan ada API SpeechDetection asas yang disokong oleh Chrome. Kami akan menggunakan annyang, perpustakaan pengesanan teks JavaScript yang popular dan ringkas. Dengan annyang, anda menentukan perintah dan pengendali mereka dalam objek JavaScript, seperti:

perintah const = {

  'in': () => console.log ('dalam perintah diterima'),

  'out': () => console.log ('perintah keluar diterima'),

};

Kemudian, yang harus anda lakukan ialah memasukkan objek itu ke dalam kaedah pada annyangobjek dan memanggil start()objek tersebut. Contoh lengkap kelihatan seperti ini:

import annyang dari 'annyang';

perintah const = {

  'in': () => console.log ('dalam perintah diterima'),

  'out': () => console.log ('perintah keluar diterima'),

};

annyang.addCommands (arahan);

annyang.start ();

Ini sangat mudah, tetapi di luar konteks tidak masuk akal, jadi mari kita memasukkannya ke dalam komponen React kami. Di dalam componentDidMountcangkuk, kami akan menambahkan perintah kami dan mula mendengar, tetapi bukannya log masuk ke konsol, kami akan memanggil dua kaedah yang mengemas kini tahap zoom di negeri kami:

  zoomIn = () => {

    ini.setState ({

      zoom: ini.state.zoom + 1

    });

  };

  zoomOut = (... args) => {

    ini.setState ({

      zoom: this.state.zoom - 1

    });

  };

  komponenDidMount () {

    annyang.addCommands ({

      'in': this.zoomIn,

      'keluar': this.zoomOut,

    });

    annyang.start ();

  }

Apabila halaman kami dimuat semula, penyemak imbas meminta kami izin untuk menggunakan mikrofon. Sekiranya anda menjawab ya, sekarang anda dapat menggunakan perintah suara "masuk" dan "keluar" untuk memperbesar dan memperkecil. Mahu lebih? Perpustakaan annyang juga menyokong ruang letak dan ungkapan biasa. Untuk menyokong zoom secara langsung ke tahap tertentu, kita dapat menentukan perintah seperti:

    annyang.addCommands ({

      / * arahan sedia ada * /

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

    });

Yang :levelmerupakan bahagian kunci adalah kaedah standard untuk menentukan placeholder satu perkataan. (Sekiranya kita menginginkan placeholder berbilang dunia, kita dapat menggunakannya *level.) Secara lalai, kata yang ditangkap oleh placeholder diteruskan sebagai argumen rentetan ke fungsi pengendali. Tetapi jika kita mendefinisikan pengendali sebagai objek dengan regexdan callbackkunci, kita dapat mengekang apa lagi tempat letaknya. Dalam kes ini, kami mengehadkan placeholder kepada digit sahaja. Tempat letak itu masih akan diserahkan sebagai rentetan, jadi kami perlu memaksanya ke angka ketika kami menetapkan tahap zoom:

  zoomTo = (zoomLevel) => {

    ini.setState ({

      zoom: + zoomLevel,

    });

  }

Dan itu sahaja! Kita sekarang boleh memperbesar atau memperkecil satu tingkat pada satu waktu, atau kita boleh melangkau terus ke satu tingkat dengan mengatakan bilangannya. Sekiranya anda bermain-main dengan ini di rumah, anda akan melihat bahawa memerlukan beberapa saat untuk annyang mendaftarkan perintah tersebut, dan kadang-kadang perintah tidak didaftarkan. Pengecaman pertuturan tidak sempurna. Sekiranya anda membina pengecaman pertuturan ke dalam sistem pengeluaran, anda mesti memasukkan mekanisme maklum balas masa nyata untuk kesilapan atau mengenal pasti kapan perpustakaan sedang mendengar secara aktif.

Sekiranya anda ingin bermain dengan kod, anda boleh mendapatkannya di GitHub. Jangan ragu untuk menghubungi Twitter untuk berkongsi antara muka multimodal anda sendiri: @freethejazz.