Ajout de la recherche vocale à une application React

Les commandes vocales ne sont pas uniquement pour les assistants virtuels comme Google Assistant ou Alexa. Ils peuvent améliorer considérablement les applications mobiles et de bureau, ajoutant à la fois des fonctionnalités et une expérience utilisateur amusante. L'intégration de commandes vocales ou de recherche vocale est étonnamment simple. Cet article démontre la création d'une application de recherche de livre à commande vocale à l'aide de l'API de la parole Web dans un framework React.

Le code complet est disponible sur github, et une démo de travail est fournie à la fin.

Concepts clés:

• Tire de l'API de la parole Web pour permettre la recherche vocale dans les applications React, l'amélioration de l'interaction des utilisateurs.
• Création d'un composant React de base (en utilisant Create React App), puis en intégrant l'API de la parole Web pour la reconnaissance vocale.
• Implémentation de la reconnaissance de la parole continue dans le cycle de vie des composants React, gérant les états avec des crochets React.
• Développer un crochet React personnalisé (useVoice) pour encapsuler et réutiliser la logique de reconnaissance vocale.
• Extension des fonctionnalités en intégrant une fonction de recherche de livre à l'aide d'un autre crochet personnalisé (useBookFetch), en interagissant avec une API externe (Open Library) pour la récupération de données basée sur l'entrée vocale.

API de discours Web Introduction:

L'API de discours Web a un support de navigateur limité. Assurez-vous que vous utilisez un navigateur compatible (consultez MDN pour les informations de compatibilité à jour).

Un exemple simple de l'utilisation de l'API de discours Web:

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

Ce code instancie SpeechRecognition, ajoute un écouteur d'événements onresult pour gérer la transcription de la parole et commence à écouter. Le navigateur demandera un accès au microphone. Après la parole, onresult fournit le texte transcrit.

L'événement onresult offre un objet SpeechRecognitionEvent contenant un tableau results. Le premier élément de ce tableau contient le texte transcrit.

Ce code de base peut s'exécuter dans Chrome Devtools ou dans un fichier JavaScript. Intégrons cela dans une application React.

Utilisation de la parole Web dans React:

Créer un nouveau projet React:

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

Remplacez la valeur par défaut App.js par les éléments suivants, qui intègre l'API de la parole Web:

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

Ce composant amélioré gère l'état d'écoute (isListening), stocke le texte transcrit (text) et gère l'événement de clic microphone (listen). Le useEffect Hook met en place l'auditeur onresult.

REACT REACT CUSTUBLE REACT REACT:

Pour améliorer la réutilisabilité du code, créez un crochet personnalisé useVoice.js:

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

Ce crochet résume la logique de reconnaissance vocale. Maintenant, mise à jour App.js pour utiliser ce crochet:

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

Cela simplifie App.js et favorise la réutilisation du code.

Fonctionnalité de recherche vocale du livre:

Créez un autre crochet personnalisé useBookFetch.js pour gérer la recherche de livre:

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

Ce crochet récupère les données du livre de la bibliothèque ouverte en fonction du nom de l'auteur. Enfin, intégrez cela dans App.js pour afficher les résultats de la recherche:

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

Cela complète l'application de recherche de livre contrôlée par la voix.

démo:

[Insérer des codes et une boîte ou un lien de démonstration similaire ici]

Conclusion:

Cet exemple présente la puissance et la simplicité de l'API de la parole Web pour ajouter l'interaction vocale pour réagir les applications. N'oubliez pas la compatibilité du navigateur et les limitations de précision potentielle. Le code complet est disponible sur github.

FAQS (déplacé vers la fin pour un meilleur flux): (Ceux-ci suivraient la conclusion au format d'origine) La section FAQ de l'entrée d'origine peut être incluse ici, légèrement reformulée pour une meilleure clarté et un meilleur flux Dans cet article révisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!