如何在React應(yīng)用中集成語(yǔ)音識(shí)別功能如使用Web Speech API

在React應(yīng)用中集成語(yǔ)音識(shí)別功能可以使用Web Speech API。下面是一個(gè)簡(jiǎn)單的例子：

1. 首先，在React應(yīng)用中安裝 react-speech-recognition 包：

npm install react-speech-recognition

2. 創(chuàng)建一個(gè)新的組件，例如 SpeechRecognition.js，并在其中使用 react-speech-recognition 包提供的 useSpeechRecognition 鉤子來(lái)實(shí)現(xiàn)語(yǔ)音識(shí)別功能：

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. 在你的主應(yīng)用組件中使用 SpeechRecognition 組件：

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

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

export default App;

4. 運(yùn)行你的React應(yīng)用，點(diǎn)擊 Start 按鈕開始語(yǔ)音識(shí)別，點(diǎn)擊 Stop 按鈕停止語(yǔ)音識(shí)別，并且識(shí)別到的文本會(huì)實(shí)時(shí)顯示在頁(yè)面上。

這樣，你就成功集成了語(yǔ)音識(shí)別功能到你的React應(yīng)用中使用Web Speech API。