如何在React應用中集成語音識別功能如使用Web Speech API

在React應用中集成語音識別功能可以使用Web Speech API。下面是一個簡單的例子：

1. 首先，在React應用中安裝 react-speech-recognition 包：

npm install react-speech-recognition

2. 創建一個新的組件，例如 SpeechRecognition.js，并在其中使用 react-speech-recognition 包提供的 useSpeechRecognition 鉤子來實現語音識別功能：

import React from 'react';
import { useSpeechRecognition } from 'react-speech-recognition';

const SpeechRecognition = () => {
  const { transcript, listening, startListening, stopListening } = useSpeechRecognition();

  const handleStart = () => {
    startListening();
  };

  const handleStop = () => {
    stopListening();
  };

  return (
    <div>
      <button onClick={handleStart}>Start</button>
      <button onClick={handleStop}>Stop</button>
      <p>{transcript}</p>
    </div>
  );
};

export default SpeechRecognition;

3. 在你的主應用組件中使用 SpeechRecognition 組件：

import React from 'react';
import SpeechRecognition from './SpeechRecognition';

const App = () => {
  return (
    <div>
      <h1>Speech Recognition App</h1>
      <SpeechRecognition />
    </div>
  );
};

export default App;

4. 運行你的React應用，點擊 Start 按鈕開始語音識別，點擊 Stop 按鈕停止語音識別，并且識別到的文本會實時顯示在頁面上。

這樣，你就成功集成了語音識別功能到你的React應用中使用Web Speech API。