Tutorial JavaScript: Tambahkan pengenalan ucapan ke aplikasi web Anda

Sementara browser bergerak menuju dukungan pengenalan ucapan dan kemampuan yang lebih futuristik, pengembang aplikasi web biasanya dibatasi pada keyboard dan mouse. Tetapi bagaimana jika kita dapat meningkatkan interaksi keyboard dan mouse dengan mode interaksi lain, seperti perintah suara atau posisi tangan?

Dalam rangkaian posting ini, kita akan membuat penjelajah peta dasar dengan interaksi multimodal. Yang pertama adalah perintah suara. Namun, pertama-tama kita harus mengatur struktur aplikasi kita sebelum kita dapat memasukkan perintah apa pun.

Aplikasi kita, yang di-bootstrap dengan create-react-app, akan menjadi peta layar penuh yang diberdayakan oleh komponen React untuk Leaflet.js. Setelah menjalankan create-react-app,, yarn add leafletdan yarn add react-leaflet, kami akan membuka Appkomponen kami dan menentukan Mapkomponen kami :

import React, {Component} dari 'react';

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

import './App.css';

class App extends Komponen {

  negara bagian = {

    pusat: [41.878099, -87.648116],

    zoom: 12,

  };

  updateViewport = (viewport) => {

    this.setState ({

      center: viewport.center,

      zoom: viewport.zoom,

    });

  };

  render () {

    const {

      pusat,

      Perbesar,

    } = this.state;

    kembali (

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

          center = {center}

          zoom = {zoom}

          onViewportChange = {this.updateViewport}>

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

            atribusi = "© kontributor OpenStreetMap"

          />

    )

  }

}

ekspor Aplikasi default;

The Appkomponen komponen stateful yang melacak pusat dan zoom sifat, melewati mereka ke dalam Mapkomponen. Saat pengguna berinteraksi dengan peta melalui interaksi mouse dan keyboard bawaan, kami diberi tahu untuk memperbarui status kami dengan tingkat pusat dan zoom baru.

Dengan komponen layar penuh yang ditentukan, aplikasi kita terlihat seperti berikut:

Di luar kotak, kami mendapatkan mode interaksi khas termasuk mouse, keyboard, dan sentuhan pada perangkat yang mendukungnya. Dengan interaksi dasar dan antarmuka pengguna yang ditentukan, mari tambahkan perintah suara untuk memperbesar dan memperkecil.

Ada banyak perpustakaan yang tersedia untuk melakukan pengenalan suara di browser. Bahkan ada API SpeechDetection dasar yang didukung oleh Chrome. Kami akan menggunakan annyang, pustaka deteksi teks JavaScript yang populer dan sederhana. Dengan annyang, Anda mendefinisikan perintah dan penangannya dalam objek JavaScript, seperti:

perintah const = {

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

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

};

Kemudian, yang harus Anda lakukan adalah meneruskan objek itu ke dalam metode pada annyangobjek dan memanggil start()objek itu. Contoh lengkapnya terlihat seperti ini:

impor annyang dari 'annyang';

perintah const = {

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

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

};

annyang.addCommands (perintah);

annyang.start ();

Ini sangat sederhana, tetapi di luar konteks tidak terlalu masuk akal, jadi mari kita menggabungkannya ke dalam komponen React kita. Di dalam componentDidMounthook, kami akan menambahkan perintah kami dan mulai mendengarkan, tetapi alih-alih masuk ke konsol, kami akan memanggil dua metode yang memperbarui tingkat zoom dalam status kami:

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

  }

Saat halaman kami disegarkan, browser meminta izin kepada kami untuk menggunakan mikrofon. Jika Anda menjawab ya, Anda sekarang dapat menggunakan perintah suara "masuk" dan "keluar" untuk memperbesar dan memperkecil. Ingin lebih? Pustaka annyang mendukung placeholder dan ekspresi reguler juga. Untuk mendukung zooming langsung ke level tertentu, kita dapat mendefinisikan perintah seperti ini:

    annyang.addCommands ({

      / * perintah yang ada * /

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

    });

Itu :leveladalah bagian dari kunci adalah cara standar untuk mendefinisikan tempat penampung kata tunggal. (Jika kita menginginkan tempat penampung dunia ganda, kita bisa menggunakan *levelsebagai gantinya.) Secara default, kata yang ditangkap oleh tempat penampung diteruskan sebagai argumen string ke fungsi penangan. Tetapi jika kita mendefinisikan handler sebagai sebuah objek dengan kunci regexdan callback, kita dapat membatasi lebih jauh apa placeholder itu. Dalam kasus ini, kami membatasi placeholder hanya menjadi digit. Placeholder itu masih akan diteruskan sebagai string, jadi kita perlu memaksanya menjadi angka saat menyetel tingkat zoom:

  zoomTo = (zoomLevel) => {

    this.setState ({

      zoom: + zoomLevel,

    });

  }

Dan itu dia! Sekarang kita dapat memperbesar atau memperkecil satu tingkat pada satu waktu, atau kita dapat melompat langsung ke suatu tingkat dengan menyebutkan angkanya. Jika Anda bermain-main dengan ini di rumah, Anda akan melihat bahwa perlu beberapa detik bagi annyang untuk mendaftarkan perintah, dan terkadang perintah tidak terdaftar. Pengenalan ucapan tidak sempurna. Jika Anda membuat pengenalan ucapan ke dalam sistem produksi, Anda sebaiknya memasukkan mekanisme umpan balik waktu nyata untuk kesalahan atau untuk mengidentifikasi saat perpustakaan mendengarkan secara aktif.

Jika Anda ingin bermain-main dengan kode tersebut, Anda dapat menemukannya di GitHub. Jangan ragu untuk menghubungi Twitter untuk membagikan antarmuka multimoda Anda sendiri: @freethejazz.