Reactアプリケーションに音声検索を追加します

音声コマンドは、Google AssistantやAlexaなどの仮想アシスタントだけではありません。 モバイルおよびデスクトップアプリケーションを大幅に強化し、機能と楽しいユーザーエクスペリエンスの両方を追加できます。 音声コマンドや音声検索の統合は驚くほど簡単です。この記事では、Reactフレームワーク内のWebスピーチAPIを使用して、音声制御された本の検索アプリケーションを構築します。

完全なコードはGitHubで利用でき、最後に作業デモが提供されます。

重要な概念：

Web Speech APIを活用して、Reactアプリケーションで音声検索を可能にし、ユーザーの相互作用を改善します。

基本的なReactコンポーネントの構築（Create React Appを使用）してから、Speech APIを統合して音声認識のために。
• Reactコンポーネントライフサイクル内で継続的な音声認識を実装し、Reactフックを使用した状態を管理します。
音声認識ロジックをカプセル化して再利用するためのカスタムReactフック（
• ）を開発します。
• 別のカスタムフック（
）を使用して本の検索機能を統合して機能を拡張し、音声入力に基づいてデータ検索のために外部API（オープンライブラリ）と対話します。
• useVoice
Web Speech APIはじめに：
• useBookFetch
Web Speech APIには、ブラウザのサポートが限られています。 互換性のあるブラウザを使用していることを確認してください（最新の互換性情報についてはMDNを確認してください）。

Web Speech APIを使用する簡単な例：

このコードはインスタンス化され、イベントリスナーを追加して音声転写を処理し、リスニングを開始します。 ブラウザはマイクのアクセスを要求します。 スピーチの後、

は転写されたテキストを提供します。

イベントは、

arrayを含む

オブジェクトを配信します。 この配列の最初の要素には、転写されたテキストが保持されます。

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

この基本コードは、Chrome DevtoolsまたはJavaScriptファイルで実行できます。 これをReactアプリケーションに統合しましょう。

SpeechRecognition onresultonresult

ReactでWeb Speechを使用：onresultSpeechRecognitionEvent results新しいReactプロジェクトを作成します：

デフォルトを次のものに置き換えます。これには、WebスピーチAPIが組み込まれています。

この拡張されたコンポーネントは、リスニング状態（）を管理し、転写されたテキスト（

）を格納し、マイククリックイベント（

）を処理します。 フックは、リスナーをセットアップします。

再利用可能なカスタム反応音声フック：

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

コードの再利用可能性を改善するには、カスタムフック

：useVoice.jsを作成します

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

このフックは、音声認識ロジックをカプセル化します。 ここで、このフックを使用するには

を更新します：App.js

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

これにより、

が簡素化され、コードの再利用を促進します App.js

book音声検索機能：

本の検索を処理するために別のカスタムフックを作成してください：

useBookFetch.jsこのフックは、著者の名前に基づいて、オープンライブラリから本データを取得します。 最後に、検索結果を表示するには、これを

に統合します。

// 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;

これにより、音声制御された本の検索アプリケーションが完成します App.js

デモ：

// 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 };

[CodeSandboxまたは同様のデモリンクをこちらに挿入]

結論：

この例では、Reactアプリケーションに音声相互作用を追加するためのWeb Speech APIのパワーとシンプルさを示しています。 ブラウザの互換性と潜在的な精度の制限を覚えておいてください。 完全なコードはgithubで利用できます。

FAQ（より良いフローのために最後に移動）：（これらは元の形式で結論に従うでしょう）元の入力のFAQセクションはここに含めることができます。この改訂された記事の中で

以上がReactアプリケーションに音声検索を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。