Menambah carian suara ke aplikasi React

Perintah suara bukan hanya untuk pembantu maya seperti Google Assistant atau Alexa. Mereka dapat meningkatkan aplikasi mudah alih dan desktop dengan ketara, menambah kedua -dua fungsi dan pengalaman pengguna yang menyeronokkan. Mengintegrasikan arahan suara atau carian suara adalah mengejutkan. Artikel ini menunjukkan membina aplikasi carian buku yang dikawal oleh suara menggunakan API Ucapan Web dalam rangka React.

Kod Lengkap tersedia di GitHub, dan demo kerja disediakan pada akhir.

Konsep Utama:

Memanfaatkan API Ucapan Web untuk membolehkan carian suara dalam aplikasi React, meningkatkan interaksi pengguna.
Membina komponen React Asas (menggunakan Create React App), kemudian mengintegrasikan API Ucapan Web untuk pengiktirafan pertuturan.
Melaksanakan pengiktirafan pertuturan berterusan dalam kitaran hayat komponen React, menguruskan negara dengan cangkuk reaksi.
Membangunkan cangkuk reaksi tersuai ( useVoice Memperluaskan fungsi dengan mengintegrasikan ciri carian buku menggunakan cangkuk tersuai lain (), berinteraksi dengan API luaran (perpustakaan terbuka) untuk pengambilan data berdasarkan input suara.
• useBookFetch
API Ucapan Web Pengenalan:

API Ucapan Web mempunyai sokongan penyemak imbas terhad. Pastikan anda menggunakan penyemak imbas yang serasi (semak MDN untuk maklumat keserasian terkini).

Contoh mudah menggunakan API Ucapan Web:

Kod ini memberi instantiates

, menambah pendengar acara

const SpeechRecognition = webkitSpeechRecognition;
const speech = new SpeechRecognition();
speech.onresult = (event) => {
   console.log(event);
};
speech.start();

untuk mengendalikan transkripsi pertuturan, dan mula mendengar. Penyemak imbas akan meminta akses mikrofon. Selepas ucapan,

menyediakan teks yang ditranskripsikan. SpeechRecognition onresult Acara onresult menyampaikan objek

yang mengandungi array

. Elemen pertama array ini memegang teks yang ditranskripsikan. onresult SpeechRecognitionEvent Kod asas ini boleh dijalankan di Chrome Devtools atau fail JavaScript. Mari kita mengintegrasikannya ke dalam aplikasi React. results

Menggunakan ucapan web dalam React:

Buat projek React baru:

Gantikan lalai

dengan yang berikut, yang menggabungkan API Ucapan Web:

npx create-react-app book-voice-search
cd book-voice-search
npm start

Komponen yang dipertingkatkan ini menguruskan keadaan pendengaran (App.js), menyimpan teks transkripsi (), dan mengendalikan peristiwa klik mikrofon (

). Hook

// App.js
import React, { useState, useEffect } from "react";
import "./index.css";
import Mic from "./microphone-black-shape.svg"; // Import your microphone image

let speech;
if (window.webkitSpeechRecognition) {
  const SpeechRecognition = webkitSpeechRecognition;
  speech = new SpeechRecognition();
  speech.continuous = true; // Enable continuous listening
} else {
  speech = null;
}

const App = () => {
  const [isListening, setIsListening] = useState(false);
  const [text, setText] = useState("");

  const listen = () => {
    setIsListening(!isListening);
    if (isListening) {
      speech.stop();
    } else {
      speech.start();
    }
  };

  useEffect(() => {
    if (!speech) return;
    speech.onresult = (event) => {
      setText(event.results[event.results.length - 1][0].transcript);
    };
  }, []);

  // ... (rest of the component remains the same)
};

export default App;

menetapkan pendengar

. isListening text listen cangkuk suara React Custom yang boleh diguna semula: useEffect onresult

Untuk meningkatkan kebolehgunaan semula kod, buat cangkuk tersuai useVoice.js:

const SpeechRecognition = webkitSpeechRecognition;
const speech = new SpeechRecognition();
speech.onresult = (event) => {
   console.log(event);
};
speech.start();

cangkuk ini merangkumi logik pengiktirafan suara. Sekarang, kemas kini App.js untuk menggunakan cangkuk ini:

npx create-react-app book-voice-search
cd book-voice-search
npm start

Ini memudahkan App.js dan mempromosikan penggunaan semula kod.

Fungsi Carian Suara Buku:

Buat satu lagi cangkuk tersuai useBookFetch.js untuk mengendalikan carian buku:

// App.js
import React, { useState, useEffect } from "react";
import "./index.css";
import Mic from "./microphone-black-shape.svg"; // Import your microphone image

let speech;
if (window.webkitSpeechRecognition) {
  const SpeechRecognition = webkitSpeechRecognition;
  speech = new SpeechRecognition();
  speech.continuous = true; // Enable continuous listening
} else {
  speech = null;
}

const App = () => {
  const [isListening, setIsListening] = useState(false);
  const [text, setText] = useState("");

  const listen = () => {
    setIsListening(!isListening);
    if (isListening) {
      speech.stop();
    } else {
      speech.start();
    }
  };

  useEffect(() => {
    if (!speech) return;
    speech.onresult = (event) => {
      setText(event.results[event.results.length - 1][0].transcript);
    };
  }, []);

  // ... (rest of the component remains the same)
};

export default App;

cangkuk ini mengambil data buku dari perpustakaan terbuka berdasarkan nama pengarang. Akhirnya, mengintegrasikan ini ke App.js untuk memaparkan hasil carian:

// useVoice.js
import { useState, useEffect } from 'react';

// ... (SpeechRecognition setup remains the same)

const useVoice = () => {
  // ... (state and listen function remain the same)

  useEffect(() => {
    // ... (onresult event listener remains the same)
  }, []);

  return { text, isListening, listen, voiceSupported: speech !== null };
};

export { useVoice };

Ini melengkapkan aplikasi carian buku yang dikawal suara.

Demo:

[masukkan codesandbox atau pautan demo yang serupa di sini]

Kesimpulan:

Contoh ini mempamerkan kuasa dan kesederhanaan API Ucapan Web untuk menambah interaksi suara untuk bertindak balas. Ingat keserasian penyemak imbas dan batasan ketepatan yang berpotensi. Kod penuh boleh didapati di GitHub.

FAQs (dipindahkan ke hujung untuk aliran yang lebih baik): (ini akan mengikuti kesimpulan dalam format asal) bahagian Soalan Lazim dari input asal boleh dimasukkan di sini, sedikit diganti semula untuk kejelasan dan aliran yang lebih baik dalam artikel yang disemak ini.

Atas ialah kandungan terperinci Menambah carian suara ke aplikasi React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!