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 native module for audio recorder and player.
npm install react-native-audio-recorder-player
Typescript
Module System
55.9
Supply Chain
55.9
Quality
72.6
Maintenance
50
Vulnerability
93.6
License
TypeScript (24.23%)
Swift (20.54%)
Kotlin (17.61%)
Java (16.11%)
C++ (7.48%)
Objective-C (5.07%)
Objective-C++ (4.56%)
Ruby (2.32%)
JavaScript (1.18%)
Starlark (0.62%)
CMake (0.29%)
Total Downloads
2,175,882
Last Day
1,381
Last Week
13,181
Last Month
80,937
Last Year
1,024,518
739 Stars
431 Commits
217 Forks
8 Watching
4 Branches
50 Contributors
Latest Version
3.6.12
Package Id
react-native-audio-recorder-player@3.6.12
Unpacked Size
115.31 kB
Size
26.89 kB
File Count
42
Publised On
17 Oct 2024
Cumulative downloads
Total Downloads
Last day
-60.4%
1,381
Compared to previous day
Last week
-30.3%
13,181
Compared to previous week
Last month
-10.7%
80,937
Compared to previous month
Last year
116.7%
1,024,518
Compared to previous year
1
2
This is a react-native link module for audio recorder and player. This is not a playlist audio module and this library provides simple recorder and player functionalities for both android
and ios
platforms. This only supports default file extension for each platform. This module can also handle file from url.
Happy Blog.
From version 3.0.+
, a critical migration has been done. Current version is not much different from version 2.0.+
in usability, but there are many changes internally. 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
.
There has been vast improvements in #114 which is released in 2.3.0
. We now support all RN
versions without any version differentiating. See below installation guide for your understanding.
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 |
$ yarn add react-native-audio-recorder-player
[iOS only]
1npx pod-install
$ react-native link react-native-audio-recorder-player
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-audio-recorder-player
and add RNAudioRecorderPlayer.xcodeproj
libRNAudioRecorderPlayer.a
to your project's Build Phases
➜ Link Binary With Libraries
Cmd+R
)<android/app/src/main/java/[...]/MainApplication.java
import package com.dooboolab.audiorecorderplayer.RNAudioRecorderPlayerPackage;
to the imports at the top of the filenew RNAudioRecorderPlayerPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:
include ':react-native-audio-recorder-player'
project(':react-native-audio-recorder-player').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audio-recorder-player/android')
android/app/build.gradle
:
compile project(':react-native-audio-recorder-player')
On iOS you need to add a usage description to 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>
Also, add swift bridging header if you haven't created one for swift
compatibility.
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" />
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}
Lastly, you need to enable kotlin
. Please change add the line below in android/build.gradle
.
1buildscript { 2 ext { 3 buildToolsVersion = "29.0.3" 4+ // Note: Below change is necessary for pause / resume audio feature. Not for Kotlin. 5+ minSdkVersion = 24 6 compileSdkVersion = 29 7 targetSdkVersion = 29 8+ kotlinVersion = '1.6.10' 9 10 ndkVersion = "20.1.5948944" 11 } 12 repositories { 13 google() 14 jcenter() 15 } 16 dependencies { 17 classpath("com.android.tools.build:gradle:4.2.2") 18 } 19...
All methods are implemented with promises.
Func | Param | Return | Description |
---|---|---|---|
mmss | number seconds | string | Convert seconds to minute:second string |
setSubscriptionDuration | void | Set default callback time when starting recorder or player. Default to 0.5 which is 500ms | |
addRecordBackListener | Function callBack | void | Get callback from native module. Will receive currentPosition , currentMetering (if configured in startRecorder) |
removeRecordBackListener | Function callBack | void | Removes recordBack listener |
addPlayBackListener | Function callBack | void | Get callback from native module. Will receive duration , currentPosition |
removePlayBackListener | Function callBack | void | Removes playback listener |
startRecorder | <string> uri? <boolean> meteringEnabled? | Promise<void> | Start recording. Not passing uri will save audio in default location. |
pauseRecorder | Promise<string> | Pause recording. | |
resumeRecorder | Promise<string> | Resume recording. | |
stopRecorder | Promise<string> | Stop recording. | |
startPlayer | string uri? Record<string, string> httpHeaders? | Promise<string> | Start playing. Not passing the param will play audio in default location. |
stopPlayer | Promise<string> | Stop playing. | |
pausePlayer | Promise<string> | Pause playing. | |
seekToPlayer | number milliseconds | Promise<string> | Seek audio. |
setVolume | double value | Promise<string> | Set volume of audio player (default 1.0, range: 0.0 ~ 1.0). |
2.3.0
)interface AudioSet {
AVSampleRateKeyIOS?: number;
AVFormatIDKeyIOS?: AVEncodingType;
AVModeIOS?: AVModeType;
AVNumberOfChannelsKeyIOS?: number;
AVEncoderAudioQualityKeyIOS?: AVEncoderAudioQualityIOSType;
AudioSourceAndroid?: AudioSourceAndroidType;
OutputFormatAndroid?: OutputFormatAndroidType;
AudioEncoderAndroid?: AudioEncoderAndroidType;
}
More description on each parameter types are described in
index.d.ts
. Below is an example code.
1const audioSet: AudioSet = {
2 AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
3 AudioSourceAndroid: AudioSourceAndroidType.MIC,
4 AVModeIOS: AVModeIOSOption.measurement,
5 AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
6 AVNumberOfChannelsKeyIOS: 2,
7 AVFormatIDKeyIOS: AVEncodingOption.aac,
8};
9const meteringEnabled = false;
10
11const uri = await this.audioRecorderPlayer.startRecorder(
12 path,
13 audioSet,
14 meteringEnabled,
15);
16
17this.audioRecorderPlayer.addRecordBackListener((e: any) => {
18 this.setState({
19 recordSecs: e.currentPosition,
20 recordTime: this.audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)),
21 });
22});
{cacheDir}/sound.mp4
.{cacheDir}/sound.m4a
.1import AudioRecorderPlayer from 'react-native-audio-recorder-player'; 2 3const audioRecorderPlayer = new AudioRecorderPlayer(); 4 5onStartRecord = async () => { 6 const result = await this.audioRecorderPlayer.startRecorder(); 7 this.audioRecorderPlayer.addRecordBackListener((e) => { 8 this.setState({ 9 recordSecs: e.currentPosition, 10 recordTime: this.audioRecorderPlayer.mmssss( 11 Math.floor(e.currentPosition), 12 ), 13 }); 14 return; 15 }); 16 console.log(result); 17}; 18 19onStopRecord = async () => { 20 const result = await this.audioRecorderPlayer.stopRecorder(); 21 this.audioRecorderPlayer.removeRecordBackListener(); 22 this.setState({ 23 recordSecs: 0, 24 }); 25 console.log(result); 26}; 27 28onStartPlay = async () => { 29 console.log('onStartPlay'); 30 const msg = await this.audioRecorderPlayer.startPlayer(); 31 console.log(msg); 32 this.audioRecorderPlayer.addPlayBackListener((e) => { 33 this.setState({ 34 currentPositionSec: e.currentPosition, 35 currentDurationSec: e.duration, 36 playTime: this.audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)), 37 duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)), 38 }); 39 return; 40 }); 41}; 42 43onPausePlay = async () => { 44 await this.audioRecorderPlayer.pausePlayer(); 45}; 46 47onStopPlay = async () => { 48 console.log('onStopPlay'); 49 this.audioRecorderPlayer.stopPlayer(); 50 this.audioRecorderPlayer.removePlayBackListener(); 51};
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);
Example
folder by running cd Example
.yarn install && yarn start
.yarn ios
to run on ios simulator and yarn android
to run on your android device.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.
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-audio-recorder-player-advanced-android
React Native Audio Recorder and Player. Advanced android additions.