Gathering detailed insights and metrics for react-native-audio-recorder-player
Gathering detailed insights and metrics for react-native-audio-recorder-player
Gathering detailed insights and metrics for react-native-audio-recorder-player
Gathering detailed insights and metrics for react-native-audio-recorder-player
@react-native-oh-tpl/react-native-audio-recorder-player
React Native Audio Recorder and Player.
react-native-audio-recorder-player-adalo
React Native Audio Recorder and Player.
komodaa-react-native-audio-recorder-player
React Native Audio Recorder and Player.
@matthiasn/react-native-audio-recorder-player
React Native Audio Recorder and Player.
react-native native module for audio recorder and player with nitromodule!
npm install react-native-audio-recorder-player
Typescript
Module System
Node Version
NPM Version
Kotlin (45.11%)
TypeScript (30.1%)
Swift (17.43%)
Ruby (3.94%)
JavaScript (3.15%)
CMake (0.26%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
778 Stars
448 Commits
229 Forks
8 Watchers
2 Branches
52 Contributors
Updated on Jul 09, 2025
Latest Version
4.0.1
Package Id
react-native-audio-recorder-player@4.0.1
Unpacked Size
121.80 kB
Size
27.53 kB
File Count
39
NPM Version
10.8.2
Node Version
20.19.2
Published on
Jul 08, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
2
🎉 Version 4.0.0 Released with NitroModule Support!
This is a high-performance React Native module for audio recording and playback, now powered by NitroModules for direct native module access without bridge overhead. The library provides simple recorder and player functionalities for both Android and iOS platforms with full TypeScript support and type safety.
Version 4.0.0 introduces a complete rewrite using NitroModules, offering:
Import Change: The module is now imported differently:
1// Before (3.x) 2import AudioRecorderPlayer from 'react-native-audio-recorder-player'; 3const audioRecorderPlayer = new AudioRecorderPlayer(); 4 5// After (4.0.0) 6import { AudioRecorderPlayerNitro } from 'react-native-audio-recorder-player'; 7const audioRecorderPlayer = new AudioRecorderPlayerNitro();
Event Listeners: New event listener API:
1// Before (3.x) 2audioRecorderPlayer.addRecordBackListener((e) => { ... }); 3 4// After (4.0.0) 5audioRecorderPlayer.onRecordingProgress = (e) => { ... }; 6audioRecorderPlayer.onPlaybackProgress = (e) => { ... };
Promise Return Types: All methods now have proper TypeScript types
From version 3.0.+
, a critical migration has been done. Also note that it supports iOS
platform version 10.0
or newer.
Codebase has been re-written to kotlin for Android and swift for iOS. Please follow the post installation for this changes.
[iOS]
pauseRecorder
and resumeRecorder
features are added.
minSdk
of 24
.Renamed callback variables.
1export type RecordBackType = { 2 isRecording?: boolean; 3 currentPosition: number; 4 currentMetering?: number; 5}; 6 7export type PlayBackType = { 8 isMuted?: boolean; 9 currentPosition: number; 10 duration: number; 11};
subscriptionDuration
offset not defaults to 0.5
which is 500ms
.
3.x API | 4.0.0 NitroModule API |
---|---|
new AudioRecorderPlayer() | new AudioRecorderPlayerNitro() |
addRecordBackListener(cb) | onRecordingProgress = cb |
removeRecordBackListener() | onRecordingProgress = undefined |
addPlayBackListener(cb) | onPlaybackProgress = cb |
removePlayBackListener() | onPlaybackProgress = undefined |
1.x.x | 2.x.x & 3.x.x |
---|---|
startRecord | startRecorder |
pauseRecorder (3.x.x) | |
resumeRecorder (3.x.x) | |
stopRecord | stopRecorder |
startPlay | startPlayer |
stopPlay | stopPlayer |
pausePlay | pausePlayer |
resume | resumePlayer |
seekTo | seekToPlayer |
setSubscriptionDuration | |
addPlayBackListener | addPlayBackListener |
setRecordInterval | addRecordBackListener |
removeRecordInterval | `` |
setVolume |
1bun add react-native-audio-recorder-player
Or using npm/yarn:
1npm install react-native-audio-recorder-player 2# or 3yarn add react-native-audio-recorder-player
1cd ios && pod install
No additional steps required. The module uses autolinking.
After installing the package, you need to run the code generation:
1# Using bun (recommended) 2bun x nitro-codegen 3 4# Or using npm/yarn 5npx nitro-codegen 6# or 7yarn nitro-codegen
This will generate the necessary native code bindings for both iOS and Android platforms.
This library supports Expo SDK 50+ via a config plugin. The plugin handles all native configuration automatically.
1expo install react-native-audio-recorder-player
For Expo managed workflow, you need to prebuild your app after adding the plugin:
1expo prebuild
1{ 2 "expo": { 3 "plugins": [ 4 "react-native-audio-recorder-player" 5 ] 6 } 7}
Or with custom iOS microphone permission text:
1{ 2 "expo": { 3 "plugins": [ 4 [ 5 "react-native-audio-recorder-player", 6 { 7 "microphonePermissionText": "This app needs access to your microphone to record audio." 8 } 9 ] 10 ] 11 } 12}
The plugin automatically configures:
NSMicrophoneUsageDescription
in Info.plistRECORD_AUDIO
, WRITE_EXTERNAL_STORAGE
, and READ_EXTERNAL_STORAGE
permissions in AndroidManifest.xml⚠️ Important for Expo users: After adding the plugin, you must run expo prebuild
to generate the native code. For development builds, use:
1eas build --profile development --platform all
⚠️ Note: Manual installation is not recommended for NitroModule 4.0.0. Use autolinking instead.
If you must use manual installation:
bun x nitro-codegen
to generate native bindingsnitrogen
directoryMicrophone Permission: Add to your Info.plist
:
1<key>NSMicrophoneUsageDescription</key> 2<string>Give $(PRODUCT_NAME) permission to use your microphone. Your record wont be shared without your permission.</string>
Minimum iOS Version: Ensure your minimum deployment target is iOS 13.0 or higher in your Podfile
:
1platform :ios, '13.0'
Swift Support: The module uses Swift. If your project doesn't have a bridging header, it will be created automatically during pod installation.
On Android you need to add a permission to AndroidManifest.xml
:
1<uses-permission android:name="android.permission.RECORD_AUDIO" /> 2<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 3<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
If your app requires broad access to external storage, you'll need:
1<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" tools:ignore="ScopedStorage" />
Also, android above Marshmallow
needs runtime permission to record audio. Using react-native-permissions will help you out with this problem. Below is sample usage before when before staring the recording.
1if (Platform.OS === 'android') { 2 try { 3 const grants = await PermissionsAndroid.requestMultiple([ 4 PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, 5 PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, 6 PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, 7 ]); 8 9 console.log('write external storage', grants); 10 11 if ( 12 grants['android.permission.WRITE_EXTERNAL_STORAGE'] === 13 PermissionsAndroid.RESULTS.GRANTED && 14 grants['android.permission.READ_EXTERNAL_STORAGE'] === 15 PermissionsAndroid.RESULTS.GRANTED && 16 grants['android.permission.RECORD_AUDIO'] === 17 PermissionsAndroid.RESULTS.GRANTED 18 ) { 19 console.log('Permissions granted'); 20 } else { 21 console.log('All required permissions not granted'); 22 return; 23 } 24 } catch (err) { 25 console.warn(err); 26 return; 27 } 28}
Build Configuration: Update your android/build.gradle
:
1buildscript { 2 ext { 3 buildToolsVersion = "33.0.0" 4 minSdkVersion = 24 // Required for pause/resume features 5 compileSdkVersion = 33 6 targetSdkVersion = 33 7 kotlinVersion = '1.8.0' // Required for NitroModule 8 9 ndkVersion = "23.1.7779620" 10 } 11}
CMake Support: NitroModule requires CMake for Android. It's automatically configured, but ensure you have CMake installed in Android Studio:
bun x nitro-codegen
after installationcd ios && pod install
eas build
or expo prebuild
Method | Param | Return | Description |
---|---|---|---|
mmss | number seconds | string | Convert seconds to minute:second string |
mmssss | number seconds | string | Convert seconds to minute:second:millisecond string |
setSubscriptionDuration | number duration | void | Set callback interval in ms (default 500ms) |
startRecorder | string? uri, AudioSet? audioSet, | Promise<string> | Start recording with optional path and audio settings |
boolean? meteringEnabled | |||
pauseRecorder | Promise<string> | Pause recording | |
resumeRecorder | Promise<string> | Resume recording | |
stopRecorder | Promise<string> | Stop recording and return file path | |
startPlayer | string? uri, Record<string, string>? headers | Promise<string> | Start playback with optional URI and HTTP headers |
stopPlayer | Promise<string> | Stop playback | |
pausePlayer | Promise<string> | Pause playback | |
resumePlayer | Promise<string> | Resume playback | |
seekToPlayer | number milliseconds | Promise<string> | Seek to position in milliseconds |
setVolume | number value | Promise<string> | Set volume (0.0 - 1.0) |
onRecordingProgress | (event: RecordBackType) => void | void | Set recording progress callback |
onPlaybackProgress | (event: PlayBackType) => void | void | Set playback progress callback |
Method | Param | Return | Description |
---|---|---|---|
addRecordBackListener | Function callBack | void | Add recording progress listener (deprecated, use onRecordingProgress) |
removeRecordBackListener | Function callBack | void | Remove recording listener |
addPlayBackListener | Function callBack | void | Add playback progress listener (deprecated, use onPlaybackProgress) |
removePlayBackListener | Function callBack | void | Remove playback listener |
1interface AudioSet { 2 // iOS Options 3 AVSampleRateKeyIOS?: number; // Sample rate (e.g., 44100) 4 AVFormatIDKeyIOS?: AVEncodingType; // Audio format (e.g., aac, mp4) 5 AVModeIOS?: AVModeType; // Audio session mode 6 AVNumberOfChannelsKeyIOS?: number; // Number of channels (1 = mono, 2 = stereo) 7 AVEncoderAudioQualityKeyIOS?: AVEncoderAudioQualityIOSType; // Quality level 8 9 // Android Options 10 AudioSourceAndroid?: AudioSourceAndroidType; // Audio source (e.g., MIC) 11 OutputFormatAndroid?: OutputFormatAndroidType; // Output format 12 AudioEncoderAndroid?: AudioEncoderAndroidType; // Encoder type 13}
1const audioSet: AudioSet = { 2 // iOS Settings 3 AVSampleRateKeyIOS: 44100, 4 AVFormatIDKeyIOS: AVEncodingOption.aac, 5 AVModeIOS: AVModeIOSOption.measurement, 6 AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, 7 AVNumberOfChannelsKeyIOS: 2, 8 9 // Android Settings 10 AudioEncoderAndroid: AudioEncoderAndroidType.AAC, 11 AudioSourceAndroid: AudioSourceAndroidType.MIC, 12 OutputFormatAndroid: OutputFormatAndroidType.AAC_ADTS, 13}; 14 15const meteringEnabled = true; // Enable audio metering 16 17const uri = await audioRecorderPlayer.startRecorder( 18 undefined, // Use default path 19 audioSet, 20 meteringEnabled 21);
{cacheDir}/sound.mp4
.{cacheDir}/sound.m4a
.1import { AudioRecorderPlayerNitro } from 'react-native-audio-recorder-player'; 2 3const audioRecorderPlayer = new AudioRecorderPlayerNitro(); 4 5// Recording 6const onStartRecord = async () => { 7 // Set up recording progress listener 8 audioRecorderPlayer.onRecordingProgress = (e) => { 9 console.log('Recording progress:', e.currentPosition, e.currentMetering); 10 setState({ 11 recordSecs: e.currentPosition, 12 recordTime: audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)), 13 }); 14 }; 15 16 const result = await audioRecorderPlayer.startRecorder(); 17 console.log('Recording started:', result); 18}; 19 20const onStopRecord = async () => { 21 const result = await audioRecorderPlayer.stopRecorder(); 22 audioRecorderPlayer.onRecordingProgress = undefined; // Clear listener 23 console.log('Recording stopped:', result); 24}; 25 26// Playback 27const onStartPlay = async () => { 28 // Set up playback progress listener 29 audioRecorderPlayer.onPlaybackProgress = (e) => { 30 console.log('Playback progress:', e.currentPosition, e.duration); 31 setState({ 32 currentPositionSec: e.currentPosition, 33 currentDurationSec: e.duration, 34 playTime: audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)), 35 duration: audioRecorderPlayer.mmssss(Math.floor(e.duration)), 36 }); 37 }; 38 39 const result = await audioRecorderPlayer.startPlayer(); 40 console.log('Playback started:', result); 41}; 42 43const onPausePlay = async () => { 44 await audioRecorderPlayer.pausePlayer(); 45}; 46 47const onStopPlay = async () => { 48 audioRecorderPlayer.stopPlayer(); 49 audioRecorderPlayer.onPlaybackProgress = undefined; // Clear listener 50};
If you need to maintain backward compatibility, you can still use the legacy API:
1import AudioRecorderPlayer from 'react-native-audio-recorder-player'; 2 3const audioRecorderPlayer = new AudioRecorderPlayer(); 4 5// Legacy callback style still works 6audioRecorderPlayer.addRecordBackListener((e) => { 7 // Handle recording progress 8});
If you want to get actual uri from the record or play file to actually grab it and upload it to your bucket, just grab the resolved message when using startPlay
or startRecord
method like below.
To access the file with more reliability, please use react-native-blob-util or react-native-file-access. See below for examples.
react-native-blob-util
1import ReactNativeBlobUtil from 'react-native-blob-util' 2... 3const dirs = ReactNativeBlobUtil.fs.dirs; 4const path = Platform.select({ 5 ios: 'hello.m4a', 6 android: `${dirs.CacheDir}/hello.mp3`, 7}); 8 9const uri = await audioRecorderPlayer.startRecord(path);
Also, above example helps you to setup manual path to record audio. Not giving path param will record in default
path as mentioned above.
To pass in specific URI in IOS, you need to append file://
to the path. As an example using RFNS.
1import RNFetchBlob from 'rn-fetch-blob'; 2... 3const dirs = RNFetchBlob.fs.dirs; 4const path = Platform.select({ 5 ios: `file://${RNFS.DocumentDirectoryPath}/hello.m4a`, 6 android: `${this.dirs.CacheDir}/hello.mp3`, 7}); 8 9const uri = await audioRecorderPlayer.startRecord(path);
react-native-file-access
1import { Dirs } from "react-native-file-access"; 2... 3const path = Platform.select({ 4 ios: 'hello.m4a', 5 android: `${Dirs.CacheDir}/hello.mp3`, 6}); 7 8const uri = await audioRecorderPlayer.startRecord(path);
Navigate to the example directory:
1cd Example
Install dependencies:
1bun install
Generate NitroModule bindings:
1bun x nitro-codegen
Start the development server:
1bun start
Run on your platform:
1# iOS 2bun ios 3 4# Android 5bun android
mansya - logo designer.
I've been maintaining quite many repos these days and burning out slowly. If you could help me cheer up, buying me a cup of coffee will make my life really happy and get much energy out of it.
No vulnerabilities found.
No security vulnerabilities found.