Introduction à la reconnaissance vocale chez les autochtones réagissent

Pour les développeurs de Réact Native, l'intégration de la reconnaissance vocale ouvre la voie à la construction d'applications plus intuitives, inclusives et engageantes qui se distinguent par leur marché encombré. Cet article fournit un guide complet pour la mise en oeuvre de la reconnaissance vocale chez Réact Native, qui couvre la sélection de bibliothèques, les considérations relatives aux plateformes, la mise en oeuvre étape par étape, les fonctionnalités avancées et les meilleures pratiques de production.

Que vous construisiez une recherche vocale, un outil de transcription, un assistant virtuel ou une interface d'accessibilité, comprendre les nuances de la reconnaissance vocale sur iOS et Android vous aidera à fournir une expérience utilisateur transparente. Nous explorerons comment gérer les permissions, gérer les flux audio, traiter les événements de reconnaissance vocale, et combiner l'entrée vocale avec d'autres fonctionnalités d'application.

Choisir la bonne bibliothèque de reconnaissance vocale pour les autochtones réagissent

L'écosystème de React Native offre plusieurs bibliothèques et approches pour la reconnaissance vocale. Les solutions les plus couramment utilisées sont réact-native-voix, une bibliothèque multiplateforme qui enveloppe les API de reconnaissance vocale native. Les solutions de rechange comprennent réact-native-speech-recognition et réact-native-voix-recognizer[, mais réact-native-voix demeure l'option la plus populaire et la plus bien entretenue.

Réaction-native-voix Aperçu

réaction-native-voice fournit une API JavaScript pour lancer et arrêter la reconnaissance, écouter les résultats et gérer les erreurs. Elle prend en charge plusieurs langues, des résultats partiels (transposition en direct) et la reconnaissance spécifique à la localité. La bibliothèque est activement maintenue et compatible avec React Native 0,60+ (connection automatique) et prend en charge iOS et Android.

Considérations spécifiques à la plate-forme

Sur iOS, la reconnaissance vocale nécessite une connexion réseau (Apple traite l'audio sur ses serveurs à moins que vous utilisiez la reconnaissance sur les appareils via SFSpeechRecognizer). Sur Android, la reconnaissance hors ligne est disponible via Google RecognitionService, mais peut ne pas être aussi précise que la reconnaissance en ligne. Les développeurs doivent tester les deux plateformes soigneusement et envisager de mettre en œuvre des stratégies de repli pour les scénarios hors ligne.

Quand utiliser l'intégration de modules autochtones

Si votre application demande une précision élevée, des modèles de langage personnalisés ou un streaming en temps réel, envisagez d'utiliser des modules natifs pour appeler directement Google Cloud Speech-to-Text ou Apple Speech Framework. Cette approche vous donne un contrôle plus fin sur l'encodage audio, les taux d'échantillonnage et les modèles de reconnaissance, mais nécessite un effort de développement plus natif.

Mise en œuvre étape par étape avec voix réactive

Passons à la mise en œuvre complète, de l'installation à un composant de travail. Nous couvrirons la configuration de la dépendance, la gestion des permissions, la gestion de l'événement de base et les pièges communs.

1. Installation de la bibliothèque

Ajouter réaction-native-voix[ à votre projet en utilisant npm ou fil:

npm install @react-native-voice/voice

For Yarn users:

yarn add @react-native-voice/voice

Après l'installation, lancez (pour iOS) pour lier la native pod. Pour React Native 0.59 et ci-dessous, vous devrez lier manuellement avec . La bibliothèque prend désormais en charge le couplage automatique pour les versions 0.60 et ci-dessus.

2. Configuration des autorisations

La reconnaissance vocale nécessite un accès au microphone. Vous devez configurer les autorisations pour iOS et Android.

Autorisation iOS

Ouvrez et ajoutez la touche NSMicrophoneUsageDescription[ avec un message expliquant pourquoi votre application a besoin d'un accès au microphone :

<key>NSMicrophoneUsageDescription</key>
<string>This app uses the microphone to convert speech to text.</string>

Vous devrez peut-être aussi ajouter la touche NSSpeechReconnaissanceUsageDescription (anciennement requise; vérifier les lignes directrices actuelles d'Apple).

Autorisation Android

Dans , ajouter l'autorisation suivante:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

Sur Android 6.0 (API 23) et au-dessus, vous devez également demander cette autorisation à l'exécution. Utilisez de React Native pour gérer ce processus dynamiquement.

3. Demande de permissions de course

Créer une fonction pour demander l'autorisation de microphone sur Android (iOS gère les permissions automatiquement via Info.plist):

import { PermissionsAndroid, Platform } from 'react-native';

async function requestMicrophonePermission() {
 if (Platform.OS === 'android') {
 try {
 const granted = await PermissionsAndroid.request(
 PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
 {
 title: 'Microphone Permission',
 message: 'This app needs access to your microphone to recognize speech.',
 buttonNeutral: 'Ask Me Later',
 buttonNegative: 'Cancel',
 buttonPositive: 'OK',
 },
 );
 return granted === PermissionsAndroid.RESULTS.GRANTED;
 } catch (err) {
 console.warn(err);
 return false;
 }
 }
 return true; // iOS handles permission automatically
}

Appelez cette fonction avant de commencer la reconnaissance vocale pour vous assurer que l'utilisateur a accordé l'accès.

4. Construire la composante voix

Maintenant, créons un composant fonctionnel qui gère l'état de reconnaissance vocale et les événements. Nous utiliserons React hooks pour la gestion du cycle de vie.

import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, Button, Alert, ActivityIndicator } from 'react-native';
import Voice from '@react-native-voice/voice';

const SpeechToTextComponent = () => {
 const [recognizedText, setRecognizedText] = useState('');
 const [partialText, setPartialText] = useState('');
 const [isListening, setIsListening] = useState(false);
 const [error, setError] = useState('');

 // Initialize voice event listeners
 useEffect(() => {
 Voice.onSpeechStart = onSpeechStartHandler;
 Voice.onSpeechEnd = onSpeechEndHandler;
 Voice.onSpeechResults = onSpeechResultsHandler;
 Voice.onSpeechPartialResults = onSpeechPartialResultsHandler;
 Voice.onSpeechError = onSpeechErrorHandler;

 return () => {
 // Clean up listeners and destroy voice instance
 Voice.destroy().then(Voice.removeAllListeners);
 };
 }, []);

 // Event handlers
 const onSpeechStartHandler = useCallback(() => {
 console.log('Speech started');
 }, []);

 const onSpeechEndHandler = useCallback(() => {
 console.log('Speech ended');
 setIsListening(false);
 }, []);

 const onSpeechResultsHandler = useCallback((event) => {
 if (event.value && event.value.length > 0) {
 setRecognizedText(event.value[0]);
 setPartialText('');
 }
 }, []);

 const onSpeechPartialResultsHandler = useCallback((event) => {
 if (event.value && event.value.length > 0) {
 setPartialText(event.value[0]);
 }
 }, []);

 const onSpeechErrorHandler = useCallback((event) => {
 console.error('Speech recognition error', event);
 setError(event.error?.message || 'Unknown error');
 setIsListening(false);
 }, []);

 // Start listening
 const startListening = async () => {
 setError('');
 try {
 await Voice.start('en-US');
 setIsListening(true);
 } catch (e) {
 console.error('Failed to start voice', e);
 setError('Failed to start voice recognition');
 }
 };

 // Stop listening
 const stopListening = async () => {
 try {
 await Voice.stop();
 setIsListening(false);
 } catch (e) {
 console.error('Failed to stop voice', e);
 }
 };

 // Cancel listening (abort without result)
 const cancelListening = async () => {
 try {
 await Voice.cancel();
 setIsListening(false);
 } catch (e) {
 console.error('Failed to cancel voice', e);
 }
 };

 return (
 <View style={{ padding: 20 }}>
 <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Voice Recognition</Text>
 <View style={{ flexDirection: 'row', marginVertical: 20 }}>
 <Button
 title={isListening ? 'Listening...' : 'Start'}
 onPress={startListening}
 disabled={isListening}
 />
 <Button title="Stop" onPress={stopListening} disabled={!isListening} />
 </View>
 {isListening && <ActivityIndicator size="large" color="#0000ff" />}
 {partialText ? (
 <Text style={{ fontStyle: 'italic', color: '#666' }}>{partialText}</Text>
 ) : null}
 <Text style={{ marginTop: 10 }}>Final Result: {recognizedText}</Text>
 {error ? <Text style={{ color: 'red' }}>Error: {error}</Text> : null}
 </View>
 );
};

export default SpeechToTextComponent;

5. Traitement de plusieurs langues et lieux

La méthode accepte les balises de langage IETF telles que , , , , , etc. Pour prendre en charge plusieurs langues, permettre aux utilisateurs de sélectionner une locale à partir d'un sélecteur et la passer à . Notez que toutes les langues ne sont pas supportées hors ligne; testez sur les appareils réels pour vos langues cibles.

const startListening = async (locale = 'en-US') => {
 setError('');
 try {
 await Voice.start(locale);
 setIsListening(true);
 } catch (e) {
 setError('Failed to start voice recognition for ' + locale);
 }
};

6. Traitement des autorisations gracieusement

Sur iOS, le système invite automatiquement; sur Android, utilisez la fonction définie plus tôt. Donnez des retours clairs si la permission est refusée, et guidez l'utilisateur pour l'activer via les paramètres.

Caractéristiques de reconnaissance vocale avancées

Une fois que vous avez la reconnaissance de la parole de base de travail, vous pouvez améliorer votre application avec des capacités plus sophistiquées.

Commandes d'écoute et de voix continues

Pour les applications qui nécessitent un fonctionnement mains libres (p. ex., un assistant commandé par la voix), vous pouvez implémenter l'écoute continue. Après avoir reçu un résultat final, redémarrez la reconnaissance automatiquement.

const onSpeechEndHandler = useCallback(() => {
 setIsListening(false);
 // Optionally restart listening for continuous mode
 if (continuousMode) {
 startListening(currentLocale);
 }
}, [continuousMode, currentLocale]);

Vous pouvez également mettre en œuvre des points de mots clés en écoutant des résultats partiels et en déclenchant des actions lorsqu'une phrase spécifique est détectée (p. ex., «Hey Assistant»). Cependant, pour une détection fiable des mots-clés, envisager d'utiliser une bibliothèque dédiée comme réact-native-voice-trigger ou des SDK natifs (p. ex., Snowboy, Porcupine).

Reconnaissance hors ligne

Alors que de nombreux services de reconnaissance vocale nécessitent une connexion Internet, Android offre une reconnaissance vocale hors ligne via le Google RecognitionService. Pour activer hors ligne, téléchargez le paquet de langues approprié dans les paramètres des périphériques. iOS prend en charge la reconnaissance sur les appareils sur les appareils plus récents avec le SFSpeechRecognizer (disponible dans iOS 10+). Pour vérifier si la reconnaissance hors ligne est disponible, consultez la documentation de la plateforme.

Intégration aux services d'IA et de NLP

La reconnaissance vocale sert souvent de première étape dans un pipeline d'IA conversationnel. Vous pouvez passer le texte reconnu aux services de traitement de langage naturel (NLP) tels que Dialogflow, Amazon Lex ou parsers d'intention personnalisée. Par exemple, utilisez réact-native-dialogflow ou appelez les API REST de votre application React Native. Cela permet des actions vocales comme des rendez-vous de réservation, des bases de données de recherche ou le contrôle des périphériques IoT.

import Dialogflow from 'react-native-dialogflow';

const handleVoiceResult = (text) => {
 Dialogflow.requestQuery(text, (result) => {
 const intent = result.queryResult.intent.displayName;
 // Handle intent accordingly
 }, (error) => console.error(error));
};

Rétroaction multimodale

Combinez l'entrée vocale avec la rétroaction visuelle et haptique pour créer une expérience plus réactive. Utilisez des animations, des sons ou des vibrations pour indiquer que l'application écoute, traite ou a reconnu une commande. Par exemple, montrez une icône de microphone en animation en écoutant et jouez un bip court lorsque la reconnaissance est terminée.

Gestion et fiabilité des erreurs

La reconnaissance vocale est intrinsèquement bruyante et sujette aux erreurs. La gestion d'erreurs robuste est essentielle pour les applications de production.

Erreurs et atténuations courantes

  • Permission refusée: Afficher un message clair et un lien vers les paramètres. Ne jamais planter silencieusement.
  • Erreurs de réseau (iOS):[ Prévenez l'utilisateur qu'une connexion est nécessaire. Offrez un retour à l'entrée manuelle ou une reconnaissance hors ligne si disponible.
  • Aucune parole détectée: Timeout après quelques secondes et invite l'utilisateur à essayer à nouveau. Vous pouvez définir un timeout en utilisant dans le gestionnaire .
  • Reconnaissance non disponible (iOS): Possible sur les anciens appareils. Affichez un message approprié.
  • Le service Android n'est pas disponible: Certains appareils manquent de services Google. Valider en cochant (si la bibliothèque le supporte) ou en saisissant des erreurs.

Stratégies de repli

Toujours fournir un texte manuel en entrée comme un repli. La reconnaissance vocale devrait améliorer, et non remplacer, les méthodes d'entrée traditionnelles. En outre, envisager de stocker localement du texte reconnu au cas où l'utilisateur perd la connectivité Internet après la reconnaissance.

Test de reconnaissance vocale sur les appareils

Les performances de reconnaissance vocale varient considérablement selon les appareils et les environnements. Test sur plusieurs appareils réels, y compris: - Téléphones Android de bas de gamme vs. haut de gamme - iPhones plus âgés (par exemple, iPhone 6s vs. iPhone 14) - Différentes qualités de microphone - Environnements bruyants (cafés, rues) vs. chambres calmes - Différentes conditions de réseau (Wi-Fi, cellulaire, hors ligne)

Vous pouvez utiliser Detox ou Appium[ avec une entrée audio simulée, mais les tests manuels restent essentiels. Recueillir les commentaires des utilisateurs et surveiller les journaux d'erreurs pour améliorer la précision au fil du temps.

Performance et considérations relatives aux batteries

La reconnaissance vocale continue peut égoutter rapidement la batterie. Implémentez les optimisations suivantes :

  • Arrêtez la reconnaissance lorsque l'application va en arrière-plan (écoutez les modifications apportées à AppState).
  • Utilisez des résultats partiels pour fournir des commentaires en temps réel sans attendre les résultats finaux.
  • Évitez de commencer inutilement la reconnaissance – demandez une action explicite de l'utilisateur ou un déclencheur vocal clair.
  • Pour les longues séances d'écoute, envisagez de réduire le taux d'échantillonnage ou d'utiliser la reconnaissance en streaming au lieu d'envoyer l'audio complet.
// Example: Stop listening when app goes to background
import { AppState } from 'react-native';
useEffect(() => {
 const subscription = AppState.addEventListener('change', (nextAppState) => {
 if (nextAppState.match(/inactive|background/)) {
 stopListening();
 }
 });
 return () => subscription.remove();
}, []);

Accessibilité et inclusivité

La reconnaissance vocale peut améliorer considérablement l'accessibilité pour les utilisateurs ayant une déficience motrice, une déficience visuelle ou des difficultés d'apprentissage.

  • Fournir des indicateurs visuels clairs de l'état d'écoute.
  • Soutenir les technologies d'assistance (p. ex., VoiceOver/TalkBack) à côté de la voix.
  • Permettre aux utilisateurs d'ajuster la langue ou le dialecte par leur préférence.
  • Offrir d'autres méthodes d'entrée (p. ex. clavier, commande de commutateur).
  • Utilisez des boutons à contraste élevé et de grandes cibles tactiles pour les boutons de voix.

Considérations relatives à la sécurité et à la protection des renseignements personnels

Les données vocales sont sensibles. Suivez ces meilleures pratiques :

  • Minimisez la rétention audio – traitez et rejetez l'audio dès que possible.
  • Transmettre l'audio sur les canaux chiffrés si vous envoyez des services Cloud.
  • Ne conservez pas les fichiers audio bruts à moins d'être requis et avec le consentement explicite de l'utilisateur.
  • Divulguez clairement comment les données vocales sont utilisées dans votre politique de confidentialité.
  • Sur Android, considérez l'utilisation de la FOREGROUND SERVICE[ permission si vous écoutez en arrière-plan.

Ressources externes et lectures complémentaires

Pour approfondir les technologies de reconnaissance vocale et les modèles propres aux Autochtones, explorez ces ressources :

Conclusion : Construire des applications plus intelligentes avec voix

En choisissant la bonne bibliothèque, en manipulant les autorisations correctement, en gérant les événements efficacement et en considérant les fonctionnalités avancées comme l'écoute continue, le support hors ligne et l'intégration AI, vous pouvez créer des expériences adaptées à la voix qui ravissent et répondent aux besoins divers des utilisateurs. N'oubliez pas de prioriser la fiabilité, les performances et la confidentialité. Au fur et à mesure que la technologie vocale évolue, les modifications apportées à la plateforme et les mises à jour de la bibliothèque permettront de maintenir votre application compétitive et accessible.