Implementar funciones de reconocimiento de voz en aplicaciones nativas de reacción

Resumen de la facturación reaccionaria

react-native-voice proporciona una API de JavaScript para iniciar y detener el reconocimiento, escuchar resultados y manejar errores. Admite múltiples idiomas, resultados parciales (trascripción en vivo), y reconocimiento específico de la localidad. La biblioteca se mantiene y es compatible con React Native 0.60+ (auto-linking) y admite iOS y Android.

Consideraciones de la plataforma y el espacio

En iOS, el reconocimiento del habla requiere una conexión de red (Apple procesa audio en sus servidores a menos que utilice el reconocimiento en el dispositivo a través de SFSpeechRecognizer). En Android, el reconocimiento fuera de línea está disponible a través del Google RecognitionService, pero puede no ser tan exacto como el reconocimiento en línea. Los desarrolladores deben probar ambas plataformas a fondo y considerar la implementación de estrategias de retroceso para escenarios fuera de línea.

Cuándo utilizar la integración del módulo nativo

Si su aplicación exige una alta precisión, modelos de lenguaje personalizado o streaming en tiempo real, considere utilizar módulos nativos para llamar directamente a Google Cloud Speech-to-Text o Apple Speech Framework. Este enfoque le da un control más fino sobre la codificación de audio, tasas de muestra y modelos de reconocimiento, pero requiere más esfuerzo de desarrollo nativo. Para la mayoría de las aplicaciones, [Voz de reacción nativa] proporciona una funcionalidad mínima.

Aplicación paso a paso con la voz reaccionaria

Paseemos por una implementación completa, desde la instalación hasta un componente de trabajo. Cubriremos la configuración de dependencia, el manejo de permisos, la gestión básica de eventos y los obstáculos comunes.

1. Instalar la Biblioteca

Añádase [Voz de reacción nativa ] a su proyecto utilizando npm o hilo:

npm install @react-native-voice/voice

For Yarn users:

yarn add @react-native-voice/voice

Después de la instalación, ejecute (para iOS) para vincular la cápsula nativa. Para React Native 0.59 y abajo, necesitarás vincular manualmente con . La biblioteca ahora admite auto-enlace para versiones 0.60 y superiores.

2. Configuración de las Permisos

El reconocimiento de voz requiere acceso a micrófonos. Usted debe configurar permisos para iOS y Android.

iOS Permiso

Abra y agregue la tecla NSMicrophoneUsageDescription con un mensaje explicando por qué su aplicación necesita acceso al micrófono:

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

También puede necesitar añadir la clave NSSpeechRecognitionUsageDescription (antes requerida; ver las directrices actuales de Apple).

Permiso Android

En , añádase el siguiente permiso:

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

En Android 6.0 (API 23) y arriba, también debe solicitar este permiso en tiempo de ejecución. Use de React Native para manejar esto dinámicamente.

3. Solicitud de permisos de duración

Crear una función para solicitar permiso de micrófono en Android (iOS maneja permisos automáticamente a través de 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
}

Llame a esta función antes de iniciar el reconocimiento de voz para asegurar que el usuario haya concedido acceso.

4. Construcción del componente de voz

Ahora vamos a crear un componente funcional que gestiona el estado y los eventos de reconocimiento de voz. Usaremos ganchos de reacción para la gestión del ciclo de vida.

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. Manejo de múltiples idiomas y locales

El método acepta etiquetas de lenguaje de IETF como , , , , , etc. Para apoyar múltiples idiomas, permita a los usuarios seleccionar un local de un picador y pasarlo a . Tenga en cuenta que no todos los idiomas son compatibles con el teléfono; prueba en su destino.

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. Entrega de permisos con gran facilidad

Siempre comprueba los permisos antes de iniciar el reconocimiento. En iOS, el sistema se induce automáticamente; en Android, utilice la función definida anteriormente. Proveer información clara si se niega el permiso, y guiar al usuario para habilitarlo a través de ajustes.

Características del reconocimiento de voz avanzado

Una vez que tenga un reconocimiento básico de discursos, puede mejorar su aplicación con capacidades más sofisticadas.

Comandos de escucha y voz continuos

Para aplicaciones que requieren una operación sin manos (por ejemplo, un asistente controlado por voz), puede implementar la escucha continua. Después de recibir un resultado final, reiniciar el reconocimiento automáticamente. Tenga cuidado con el uso de la batería y la privacidad del usuario, siempre permite al usuario pausar o salir del modo continuo.

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

También puede implementar la palabra clave de detección escuchando resultados parciales y acciones de activación cuando se detecta una frase específica (por ejemplo, "Hey Assistant"). Sin embargo, para una detección fiable de palabras de vela, considere usar una biblioteca dedicada como react-native-voice-trigger] o SDKs nativos (por ejemplo, Snowboy, Porcupine).

Reconocimiento sin límite

Si bien muchos servicios de reconocimiento de voz requieren una conexión a Internet, Android ofrece reconocimiento de habla offline a través del Google RecognitionService. Para habilitar fuera de línea, descargue el paquete de lenguaje adecuado en la configuración de dispositivos. iOS admite el reconocimiento en dispositivos nuevos con el SFSpeechRecognizer (distribución de importación de terceros fuera de línea).

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

// 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();
}, []);