react-native-voicebox-speech-rec

react-native-voicebox-speech-rec

React Native Voicebox Speech Recognition: A powerful speech recognition library for React Native applications, enabling real-time speech-to-text transcription.

• 📱 Cross-platform: Consistent and reliable performance on both iOS and Android.
• 🌐 Driven by the SpeechRecognition interface from the Web Speech API.
  

Versions

1.0.0
iOS support
Android support
Sample App

Features

• Real-time Transcription: Convert speech to text in real-time as the user speaks.
• Custom Handlers: Easily setup callback handlers for start, end, and error events during speech recognition.
• Language Flexibility: Set a specific language for recognition or default to the user's device system language.
• No Cloud Dependency: Leverage the native speech recognition engines on iOS and Android without relying on external cloud services.
• Universal Language Support: Compatible with most languages.
  

Installation

npm install react-native-voicebox-speech-rec --save

or

yarn add react-native-voicebox-speech-rec

Then link the iOS package by running:

cd ios && pod install && cd ..

or

npx pod-install

Please make sure AndroidX is enabled in your React Native project by editing android/gradle.properties and adding the following 2 lines if they are not there yet:

android.useAndroidX=true
android.enableJetifier=true

Linking

Please use React Native version >=0.60 . React native will automatically link the library to your project.

Development Notes

📱 iOS Simulator Limitation: The simulator simulates voice input with repeated "Test" phrases and does not utilize the actual microphone input. For genuine speech recognition testing, use a physical iPhone.

🤖 Android Emulator: No specific issues noted. Just remember to enable to use the host audio input for emulator everytime (shown below).

Usage

Just two steps:

• In App.jsx or App.tsx in your React Native project, wrap your components with SpeechRecognitionRootView from react-native-voicebox-speech-rec

import React from 'react';
import { PaperProvider } from 'react-native-paper';
import { ConversationPage } from './conversation/ConversationPage';
import { SpeechRecognitionRootView } from 'react-native-voicebox-speech-rec';
import { SafeAreaProvider } from 'react-native-safe-area-context';

function App(): JSX.Element {
  return (
    <SafeAreaProvider>
      <PaperProvider>
        <SpeechRecognitionRootView>
          <ConversationPage />
        </SpeechRecognitionRootView>
      </PaperProvider>
    </SafeAreaProvider>
  );
}
export default App;

• In the file where you want to use speech recognition (e.g. ConversationPage in code example above), use the useSpeechRecognition hook to get the APIs and use them.

import React, { useCallback, useEffect, useMemo } from 'react';
import { ScrollView, Alert } from 'react-native';
import { Text } from 'react-native-paper';
import { SafeAreaView } from 'react-native-safe-area-context';
import { MicrophoneButton } from './MicrophoneButton';
import { useSpeechRecognition } from 'react-native-voicebox-speech-rec';

export const ConversationPage = React.memo(() => {
  /** ***************************************************************
   * Speech Recognition APIs from useSpeechRecognition hook
   *************************************************************** */
  const {
    startSpeechRecognition,
    stopSpeechRecognition,
    speechContentRealTime,
    setSpeechRecErrorHandler,
    setSpeechRecStartedHandler,
    setSpeechRecCompletedHandler,
  } = useSpeechRecognition();

  // Event handler when speech recognition starts
  useEffect(() => {
    setSpeechRecStartedHandler(() => {
      console.log('👆 Speech Recgnition Started!');
    });
  }, [setSpeechRecStartedHandler]);

  // Event handler when speech recognition has errors
  useEffect(() => {
    setSpeechRecErrorHandler((errorMessage: any) => {
      Alert.alert(
        'Error in speech recognition',
        String(errorMessage),
        [
          {
            text: 'OK',
            style: 'cancel',
          },
        ],
        { cancelable: false }
      );
    });
  }, [setSpeechRecErrorHandler]);

  // Event handler when speech recognition ends
  useEffect(() => {
    setSpeechRecCompletedHandler(async (userChatMessage: string) => {
      if (userChatMessage.length > 0) {
        console.log('🎉 Speech Recognition Completed. Recognized Content: ', userChatMessage);
      } else {
        console.log('🎉 Speech Recognition Completed. User spoke nothing. ');
      }
    });
  }, [setSpeechRecCompletedHandler]);

  /** **********************************************************************
   * Start speech recognition when user presses the microphone button
   ********************************************************************** */
  const handleConversationButtonPressed = useCallback(async () => {
    startSpeechRecognition();
  }, [startSpeechRecognition]);

  /** **********************************************************************
   * End speech recognition when user releases the microphone button
   ********************************************************************** */
  const handleConversationButtonReleased = useCallback(() => {
    stopSpeechRecognition();
  }, [stopSpeechRecognition]);

  const speechRecContentArea = useMemo(() => {
    return <Text variant="titleLarge">{speechContentRealTime}</Text>;
  }, [speechContentRealTime]);

  return (
    <SafeAreaView>
      {/* Show realtime speech recognition content in this area */}
      <ScrollView>{speechRecContentArea}</ScrollView>

      <MicrophoneButton
        disabled={false}
        handleButtonPressed={handleConversationButtonPressed}
        handleButtonReleased={handleConversationButtonReleased}
      />
    </SafeAreaView>
  );
});

Example App

For full and advanced usage please take a look into the example React Native app in the example folder.

API

Here are all the APIs provided by the useSpeechRecognition hook.

API	Description	Platform
startSpeechRecognition(localeTag)	Starts listening for speech for a specific locale in IETF BCP 47 standard (e.g., en-US, en-GB, zh-CN, etc). If no localeTag is given, then it uses the system locale of the user's device.	iOS, Android
stopSpeechRecognition	Stops listening for speech.	iOS, Android
cancelSpeechRecognition	Cancels listening for speech.	iOS, Android
speechContentRealTime	A string representing the recognized texts while the user is speaking. You can use this string to show the real time speech recognition text.	iOS, Android
setSpeechRecStartedHandler	Set a callback handler which is called when speech recognition starts without error. The signature of the handler is async () => void	iOS, Android
setSpeechRecCompletedHandler	Set a callback handler which is called when speech recognition completes without error. The signature of the handler is async (speechRecResult: string) => void, where speechRecResult is a string representing the text recognized from user's speech	iOS, Android
setSpeechRecErrorHandler	Set a callback handler which is called when speech recognition has error. The signature of the handler is async (errorMessage: string) => void, where errorMessage explains why the error happens	iOS, Android

License

MIT