Audio Recording
React Native Quick Start

Platforms

• Android (5.0+, API 21+)
• iOS (11.0+)

Requirements

• Node.js (16+)
• Android SDK (21+)
• JDK (8+)
• Xcode (11+)
• CocoaPods

Quick Start

Setup

1. Set up the React Native environment.

2. Install @picovoice/react-native-voice-processor.

npm install @picovoice/react-native-voice-processor

3. Enable the proper permission for recording with the hardware's microphone on both iOS and Android:

<key>NSMicrophoneUsageDescription</key>
<string>[Permission explanation]</string>

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

Usage

Access the singleton instance of VoiceProcessor:

import {
  VoiceProcessor,
  VoiceProcessorError
} from '@picovoice/react-native-voice-processor';

let voiceProcessor = VoiceProcessor.instance;

Add listeners for audio frames and errors:

voiceProcessor.addFrameListener((frame: number[]) => {
  // use audio frame
});
voiceProcessor.addErrorListener((error: VoiceProcessorError) => {
  // handle error
});

Ask for audio record permission and start recording with the desired frame length and audio sample rate:

const frameLength = 512;
const sampleRate = 16000;

try {
  if (await voiceProcessor.hasRecordAudioPermission()) {
    await voiceProcessor.start(frameLength, sampleRate);
  } else {
    // user did not grant permission
  }
} catch (e) {
  // handle start error
}

Stop audio capture:

try {
  await this._voiceProcessor.stop();
} catch (e) {
  // handle stop error
}

Once audio capture has started successfully, any frame listeners assigned to the VoiceProcessor will start receiving audio frames with the given frameLength and sampleRate.

Capturing with Multiple Listeners

Any number of listeners can be added to and removed from the VoiceProcessor instance. However, the instance can only record audio with a single audio configuration (frameLength and sampleRate), which all listeners will receive once a call to start() has been made. To add multiple listeners:

const listener1 = (frame) => { };
const listener2 = (frame) => { };
const listeners = [listener1, listener2];
voiceProcessor.addFrameListeners(listeners);

voiceProcessor.removeFrameListeners(listeners);
// or
voiceProcessor.clearFrameListeners();

Demo

For the Voice Processor React Native SDK we have an example app that demonstrates how to use VoiceProcessor in a React Native app.

Setup

Clone the react-native-voice-processor repository from GitHub:

git clone https://github.com/Picovoice/react-native-voice-processor.git

Usage

1. Install dependencies and setup environment:

npm run bootstrap

2. Connect a mobile device or launch a simulator. Then build and run the app:

npm run example android
# or
npm run example ios

3. Toggle recording on and off with the button in the center of the screen. While recording, the VU meter on the screen will respond to the volume of incoming audio.

For more information on our Voice Processor demo for React Native, head over to our GitHub repository.

Resources