將語音搜索添加到React應用程序

語音命令不僅適用於Google Assistant或Alexa等虛擬助手。 它們可以顯著增強移動和桌面應用程序，從而增加功能和有趣的用戶體驗。 集成語音命令或語音搜索非常簡單。本文展示了使用React框架中的Web語音API構建語音控制的書籍搜索應用程序。

>

完整的代碼可在GitHub上找到，最後提供了一個工作演示。

密鑰概念：

>利用Web語音API在React應用程序中啟用語音搜索，改善用戶互動。

• 構建基本的React組件（使用Create React App），然後集成Web語音API以識別語音。
• >在React組件生命週期內實現連續的語音識別，用React Hooks管理狀態。
• 開發一個自定義react鉤（
）以封裝和重複使用語音識別邏輯。
• useVoice>通過使用另一個自定義鉤（
）集成書籍搜索功能，與外部API（OPEN庫）進行數據檢索，以基於語音輸入進行數據檢索。
• useBookFetch
網絡語音API簡介：

> 網絡語音API的瀏覽器支持有限。 確保您使用兼容的瀏覽器（查看MDN以獲取最新兼容性信息）。

使用Web語音API的簡單示例：

此代碼實例化

，添加了

<code class="language-javascript">const SpeechRecognition = webkitSpeechRecognition;
const speech = new SpeechRecognition();
speech.onresult = (event) => {
   console.log(event);
};
speech.start();</code>

的事件偵聽器來處理語音轉錄並開始偵聽。 瀏覽器將要求麥克風訪問。 語音後，

提供了抄錄的文本。 SpeechRecognitiononresultonresult事件提供了包含

數組的對象。 此數組的第一個元素包含抄錄的文本。

> onresult此基本代碼可以在Chrome DevTools或JavaScript文件中運行。 讓我們將其集成到一個React應用程序中。 SpeechRecognitionEvent> results

在React中使用Web語音：>

創建一個新的React項目：

>將默認

替換為以下內容，其中包含Web語音API：

此增強的組件管理聽力狀態（

<code class="language-bash">npx create-react-app book-voice-search
cd book-voice-search
npm start</code>

），存儲抄錄的文本（

），並處理麥克風單擊事件（App.js）。

掛鉤設置

<code class="language-javascript">// 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;</code>

偵聽器。

> isListeningtext>可重複使用的自定義反應語音鉤：listenuseEffect>

提高代碼可重複性，創建一個自定義鉤useVoice.js：：

<code class="language-javascript">const SpeechRecognition = webkitSpeechRecognition;
const speech = new SpeechRecognition();
speech.onresult = (event) => {
   console.log(event);
};
speech.start();</code>

這個鉤子封裝了語音識別邏輯。 現在，更新

用於使用此鉤子：App.js

<code class="language-bash">npx create-react-app book-voice-search
cd book-voice-search
npm start</code>

這簡化了

並促進代碼重複使用。 App.js>

書籍語音搜索功能：>

創建另一個自定義掛鉤

來處理書籍搜索：useBookFetch.js>

<code class="language-javascript">// 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;</code>

>此鉤子根據作者的名字從開放庫中獲取書籍數據。 最後，將其集成到

中以顯示搜索結果：App.js

<code class="language-javascript">// 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 };</code>

這完成了語音控制的圖書搜索應用程序。

演示：

[插入codesandbox或類似的演示鏈接]

>

結論：

這個示例展示了Web語音API的功能和簡單性，用於在React應用程序中添加語音交互。 請記住瀏覽器的兼容性和潛在的準確性限制。 完整的代碼可在GitHub上找到。 >

>

常見問題（移動到末端以獲得更好的流程）：

（這些將以原始格式以結論遵循原始輸入的FAQ部分，可以包括在這裡，稍微改寫，以獲得更好的清晰度和流程在這篇修訂的文章中。

以上是將語音搜索添加到React應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！