Tutorial asas tentang bagaimana untuk menetapkan Pengiktirafan Ucapan dengan React

Baru-baru ini saya mencipta aplikasi jurnal impian yang menggunakan ciri Pengiktirafan Ucapan suara-ke-teks API Ucapan Web JavaScript untuk merakam dan menyimpan impian pengguna (bukan memerlukan pengguna untuk menaip impian mereka sendiri). Teknologi suara-ke-teks adalah sangat tepat. Sesetengah kelemahan walaupun ... ia hanya disokong sepenuhnya oleh Chrome pada masa ini, dan ia hanya mendengar selama ini (sehingga kira-kira lima minit atau lebih) sehingga ia hanya kehilangan minat (dan berhenti mendengar). Untuk tujuan banyak aplikasi, lima minit lebih daripada cukup, jadi semestinya cek!

Saya mempunyai banyak keseronokan membina aplikasi ini, dan saya ingin berkongsi apa yang saya lakukan untuk memasukkan teknologi pengenalan suara ini. Khususnya, saya ingin berkongsi bagaimana saya dapat membungkus fungsi ke dalam komponen React. Pada akhir tutorial ini, anda akan dapat

  • mulakan / hentikan pengecaman pertuturan (suara ke teks) pada klik butang, dan
  • hentikan pengecaman pertuturan menggunakan arahan suara.

Berikut adalah contoh produk akhir tutorial. Butang biru bermula dan berhenti pengiktirafan ucapan, dan transkrip interim / akhir muncul dalam warna kelabu / hitam.

Mari kita jumpa!

Sediakan contoh baru SpeechRecognition.

Saya tidak mahu menghabiskan terlalu banyak masa membincangkan persediaan permulaan contoh SpeechRecognition, kerana itu boleh didapati dalam dokumen: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Walau bagaimanapun, saya ingin perhatikan bahawa kami menetapkan pengiktirafan.interimResults = benar, kerana ia ditetapkan sebagai palsu secara lalai. Dengan mengubahnya menjadi benar, kita dapat melihat keputusan interim serta akhir untuk tujuan tutorial ini.

Nota mengenai perbezaan antara transkrip sementara dan akhir:

Transkrip interim hanyalah kata-kata yang pengenalan ucapan anda dihidupkan ketika ia cuba mencari pertandingan terbaik. Sebagai contoh, jika anda berkata "wafel", maka pemprosesan interim pengiktirafan ucapan anda mungkin pertama kali mendengar "mengerikan". Kemudian, satu atau dua kali kemudian, ia mungkin membetulkan dirinya kepada "wafel" kerana ia mendapati perlawanan yang lebih baik. Maksud saya ialah: Jika anda memerlukan ketepatan, gunakan transkrip akhir, bukan sementara.

Kami menggabungkan transkrip interim dalam tutorial ini hanya untuk menunjukkan bagaimana pengiktirafan ucapan berfungsi. Sekiranya anda tidak berminat dengan data interim, maka anda boleh mengalih keluar baris 5 dari intipati di atas apabila menyiapkan pengenalan ucapan anda.

Sekarang kita boleh menyelam ke matlamat pertama kita!

Mula / hentikan pengiktirafan ucapan pada klik butang

Sebelum kita menulis sebarang kod, kita harus menggariskan pendekatan kami.

Kita perlu terlebih dahulu membuat elemen butang. Kemudian, untuk memprogram fungsi butang, kita perlu menulis pengendali acara onClick, yang akan menjaga setiap klik seperti berikut:

  • Apabila kami mengklik butang kami untuk kali pertama, kami mahu pengenalan ucapan kami untuk mula mendengar.
  • Apabila kita mengklik untuk kali kedua, ia sepatutnya berhenti mendengar.
  • Semasa kami terus mengklik, kitaran mula / berhenti ini perlu diulang.

Melihat peluru di atas, menjadi jelas bahawa kita perlu menjejaki mendengar "negeri" ini (petunjuk, petunjuk) entah bagaimana; iaitu, kita perlu mengesan apabila pengiktirafan ucapan perlu bermula / berhenti. Bagaimana kita boleh melakukan ini? Ah ya, kita boleh menggunakan keadaan tempatan komponen React kami, seperti ditunjukkan di bawah. Secara lalai, komponen kami tidak akan didengari, jadi keadaan pendengaran awal akan berlaku.

this.state = {listening: false}

Kami kini memerlukan cara untuk menghidupkan dan mematikan pengenalan suara. Iaitu, kita memerlukan satu cara untuk bertukar kepada keadaan mendengar antara yang benar dan salah. Untuk itu, kita boleh menulis kaedah mudah, toggleListen, seperti yang ditunjukkan di bawah.

toggleListen () {
  this.setState = ({
    mendengar:! this.state.listening
  })
}

Kini kita kini boleh menulis pengendali onClick kami. Inilah aliran yang kita mahu:

→ Klik butang

→ Togol mendengar (iaitu, invoketoggleListen)

→ Mula / Hentikan pengecaman pertuturan jika this.state.listening = true / false, masing-masing

[→ Lakukan apa-apa yang bergantung kepada keadaan, contohnya, menukar warna butang semasa this.state.listening = true]

Kami akan membuat kaedah berasingan untuk mengendalikan semua logik pengiktirafan ucapan, yang disebut handleListen. Pada mulanya, masuk akal untuk mula-mula menentukan pengendali onClick kami:

onClick = {() => {
  this.toggleListen ()
  this.handleListen ()
}}

Walau bagaimanapun, jika anda menyediakan pengendali onClick dengan cara ini, anda akan menyedari bahawa ia tidak akan selalu bermula apabila anda mengklik! Anda mungkin perlu mengklik beberapa kali sebelum ia mula mendengar. Mengapa ini? Nah, kaedah setState React tidak dijamin menjadi segerak. Di latar belakang, React memutuskan bila terbaik untuk mengubah keadaan. Kadang-kadang ia segera, kadang-kadang tidak. Oleh itu masalah kita.

Untuk menyelesaikan masalah ini, kami akan menggunakan kaedah pengendalian kami dalam panggilan balik setState, seperti yang ditunjukkan di bawah.

toggleListen () {
  this.setState ({
    mendengar:! this.state.listening
  }, this.handleListen)
}

Sekarang, kami hanya boleh menetapkan pengendali onClick kami untuk menyamai ini.toggleListen. Aliran yang dikehendaki kami (klik → togol mendengar → dengar) kini dijamin!

onClick = {this.toggleListen}

Selebihnya tutorial ini didedikasikan untuk melancarkan kaedah handleListen kami. Berikut adalah inti dari apa yang kita ada setakat ini (termasuk beberapa CSS). Jangan lupa untuk mengikat kaedah tersebut!

Kaedah handleListen:

Kami mulakan handleListen dengan kod di bawah, yang memberitahu pengiktirafan ucapan kami untuk mula mendengar apabila this.state.listening = true.

handleListen () {
  jika (this.state.listening) recognition.start ()
}

Untuk mengumpul transkrip interim dan terakhir, kami menggunakan pengendali acara terbina dalam ucapan pengenalan yang dipanggil menyerang, seperti yang ditunjukkan dalam inti di bawah. Kod di dalam gelung untuk tujuan khusus datang dari dokumen.

Pada ketika ini, jika anda mengklik pada butang, anda sepatutnya dapat melihat transkrip interim dan terakhir yang memaparkan div seperti yang anda katakan!

Sekiranya anda bermain-main dengannya sedikit, anda akan dapati bahawa pengiktirafan ucapan sebenarnya akan berakhir sendiri sewaktu jeda yang sewajarnya dalam ucapan. Ini bukan apa yang kita mahu. Bagaimana jika pengguna memerlukan beberapa saat untuk berfikir?

Kita boleh menipu pengiktirafan ucapan untuk mendengar "berterusan" dengan bermain dengan pendengar acara terbina dalam yang lain. Khususnya, kita boleh memanggil pengiktirafan. Mula sekali lagi dalam pengiktirafan. Bersedia untuk memulakan semula mendengar jika ia memutuskan untuk berakhir sendiri.

Akhir sekali, untuk menghentikan pengiktirafan ucapan, kami hanya menambah pernyataan yang lain, yang memanggil pengiktirafan. When this.state.listening = false.

Dengan kod di atas, jika this.state.listening = true, tetapi pengecaman pertuturan memutuskan untuk berhenti mendengar, ia dimanipulasi untuk mendengar sekali lagi (muahaha!). Cubalah! Perkara darn akan terus didengar sehingga anda mengklik butang itu sekali lagi ... untuk sebahagian besar. Malangnya, ia akan berakhir selepas kira-kira 5 minit atau lebih. Jika anda benar-benar memerlukan masa lebih lama daripada 5 minit, anda mungkin dapat mengatasi masalah ini dengan bermain dengan pendengar acara dan menambahkan data terkawal lain ke negara setempat.

Hentikan pengecaman pertuturan menggunakan arahan suara

Bagaimana jika anda mahu menghentikan pengecaman pertuturan menggunakan arahan suara dan bukannya satu klik? Katakan anda mahu berhenti mendengar selepas perkataan "berhenti" dan "mendengar" satu demi satu. Anda hanya perlu memecah transkrip akhir ke dalam pelbagai kata, dan jika dua perkataan terakhir dalam array itu "berhenti" && "mendengar", maka panggil pengiktirafan. Anda kemudian boleh mengeluarkan kata-kata "berhenti" dan "mendengar" dari array untuk menghasilkan teks akhir yang tidak mengandungi frasa "berhenti mendengar".

Secara keseluruhannya, ia hanyalah satu permainan manipulasi pelbagai apabila anda mempunyai transkrip akhir. Lihat bahagian "- COMMANDS" dalam tajuk terakhir di bawah untuk mendapatkan butiran lebih lanjut mengenai contoh arahan suara tertentu ini.

Nota pada tajuk terakhir: Saya menambah pernyataan console.log di bawah untuk membantu menjejaki aktiviti pengiktirafan ucapan.

  • "Mendengar!" Akan dilog apabila anda mengklik butang dan mula mendengar.
  • "... terus mendengarkan ..." akan dilog masuk apabila pengiktirafan ucapan dimanipulasi untuk dimulakan semula selepas berhenti sendiri.
  • "Berhenti per klik" akan dilog apabila anda menghentikan pengecaman pertuturan dengan menggunakan satu klik.
  • "Berhenti per arahan" akan dilog apabila anda menghentikan pengecaman pertuturan dengan menggunakan arahan suara.

Itu sahaja untuk tutorial ini! Lebih banyak lagi yang boleh anda lakukan dengan kombo ini (SpeechRecognition + React), seperti menukar warna butang anda, atau memberikan komponen lain semasa mendengar.

Apa sahaja yang anda lakukan, bersenang-senang dengannya!