@appcitor/react-native-voice-to-text
Version:
This can use to convert voice to text real time in device
174 lines (138 loc) • 5.49 kB
Markdown
# react-native-voice-to-text
Convert voice to text in React Native using native speech recognition capabilities on both iOS and Android.
## Features
- Utilize the device's native speech recognition API
- Support for multiple languages
- Real-time partial results as the user speaks
- Volume level detection
- Detailed transcription results with confidence scores
- Cross-platform compatibility (iOS and Android)
- Written in TypeScript with full type definitions
## Installation
```sh
npm install react-native-voice-to-text
```
## Permissions
### iOS
You need to add the following permissions to your `Info.plist`:
```xml
<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to your microphone for speech recognition</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>This app needs access to speech recognition to convert your voice to text</string>
```
### Android
Add the following permission to your `AndroidManifest.xml`:
```xml
<uses-permission android:name="android.permission.RECORD_AUDIO" />
```
For Android 6.0+ (API level 23), you also need to request the permission at runtime:
```js
import { Platform, PermissionsAndroid } from 'react-native';
// Request microphone permission
async function requestMicrophonePermission() {
if (Platform.OS !== 'android') return true;
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
{
title: 'Microphone Permission',
message: 'This app needs access to your microphone for speech recognition',
buttonPositive: 'OK',
}
);
return granted === PermissionsAndroid.RESULTS.GRANTED;
} catch (err) {
console.warn(err);
return false;
}
}
```
## API Reference
### Methods
| Method | Description | Return Type |
|--------|-------------|-------------|
| `startListening()` | Start speech recognition | `Promise<string>` |
| `stopListening()` | Stop speech recognition | `Promise<string>` |
| `destroy()` | Clean up speech recognition resources | `Promise<string>` |
| `getRecognitionLanguage()` | Get current recognition language | `Promise<string>` |
| `setRecognitionLanguage(languageTag)` | Set recognition language (e.g., 'en-US') | `Promise<boolean>` |
| `isRecognitionAvailable()` | Check if speech recognition is available on device | `Promise<boolean>` |
| `getSupportedLanguages()` | Get list of supported language codes | `Promise<string[]>` |
| `addEventListener(eventName, callback)` | Add event listener | `EmitterSubscription` |
| `removeAllListeners(eventName)` | Remove all listeners for event | `void` |
### Events
| Event | Description | Data |
|-------|-------------|------|
| `VoiceToTextEvents.START` | Speech recognition started | `null` |
| `VoiceToTextEvents.BEGIN` | User began speaking | `null` |
| `VoiceToTextEvents.END` | Speech recognition ended | `null` |
| `VoiceToTextEvents.ERROR` | Error occurred | `{ code: number, message: string }` |
| `VoiceToTextEvents.RESULTS` | Final results obtained | `{ value: string, results: { transcriptions: Array<{ text: string, confidence: number }> } }` |
| `VoiceToTextEvents.PARTIAL_RESULTS` | Partial results as user speaks | `{ value: string, results: { transcriptions: Array<{ text: string }> } }` |
| `VoiceToTextEvents.VOLUME_CHANGED` | Volume level changed | `{ value: number }` |
| `VoiceToTextEvents.AUDIO_BUFFER` | Raw audio buffer available | `{ buffer: string }` (Base64 encoded) |
## Basic Usage
```js
import React, { useEffect, useState } from 'react';
import { View, Button, Text } from 'react-native';
import VoiceToText, { VoiceToTextEvents } from 'react-native-voice-to-text';
export default function SpeechRecognitionExample() {
const [results, setResults] = useState('');
const [isListening, setIsListening] = useState(false);
useEffect(() => {
// Set up event listeners
const resultsListener = VoiceToText.addEventListener(
VoiceToTextEvents.RESULTS,
(event) => {
setResults(event.value);
}
);
const startListener = VoiceToText.addEventListener(
VoiceToTextEvents.START,
() => setIsListening(true)
);
const endListener = VoiceToText.addEventListener(
VoiceToTextEvents.END,
() => setIsListening(false)
);
// Clean up
return () => {
VoiceToText.destroy();
resultsListener.remove();
startListener.remove();
endListener.remove();
};
}, []);
const toggleListening = async () => {
try {
if (isListening) {
await VoiceToText.stopListening();
} else {
await VoiceToText.startListening();
}
} catch (error) {
console.error(error);
}
};
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>{results || 'Say something...'}</Text>
<Button
title={isListening ? 'Stop' : 'Start'}
onPress={toggleListening}
/>
</View>
);
}
```
## Known Issues and Fixes
### Android
- **Thread Error**: SpeechRecognizer operations must run on the main thread in Android. This is handled internally in the latest version.
- **Type Conversion**: ArrayList type conversion for language lists is now properly handled.
### iOS
- Speech recognition requires user permission prompt which is handled via Info.plist settings.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)