Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-audio-recorder-player
Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-audio-recorder-player
react-native-audio-recorder-player
3.6.10-0.0.2
MIT
TypeScript
122.75 kB
Installations
npm install @react-native-oh-tpl/react-native-audio-recorder-playerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.11.0
NPM Version
10.2.4
Releases
2
Languages
5
TypeScript
C++
Ruby
JavaScript
CMake
TypeScript (85.52%)
C++ (12.43%)
Ruby (0.89%)
JavaScript (0.63%)
CMake (0.52%)
Developer
react-native-oh-library
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
426 Commits
4 Forks
1 Branches
1 Contributors
Updated on Dec 19, 2024
Maintainers
20
Package Meta Information
Latest Version
3.6.10-0.0.2
Package Id
@react-native-oh-tpl/react-native-audio-recorder-player@3.6.10-0.0.2
Unpacked Size
122.75 kB
Size
39.18 kB
File Count
36
NPM Version
10.2.4
Node Version
20.11.0
Published on
Nov 12, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
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
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
2
react-native-audio-recorder-player
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.
Preview
Free read
-
Happy Blog.
Breaking Changes
-
From version
3.0.+, a critical migration has been done. Current version is not much different from version2.0.+in usability, but there are many changes internally. Also note that it supportsiOSplatform version10.0or newer.-
Codebase has been re-written to kotlin for Android and swift for iOS. Please follow the post installation for this changes.
[iOS]
- AVAudioPlayer has been migrated to AVPlayer which supports stream and more possibilities #231, #245, #275.
-
pauseRecorderandresumeRecorderfeatures are added.- Caveat
Android now requires
minSdkof24.
- Caveat
Android now requires
-
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}; -
subscriptionDurationoffset not defaults to0.5which is500ms.- Resolve #273
-
-
There has been vast improvements in #114 which is released in
2.3.0. We now support allRNversions without any version differentiating. See below installation guide for your understanding.
Migration Guide
| 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 |
Getting started
$ yarn add react-native-audio-recorder-player
Installation
Using React Native >= 0.61
[iOS only]
1npx pod-install
Using React Native < 0.60
$ react-native link react-native-audio-recorder-player
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜react-native-audio-recorder-playerand addRNAudioRecorderPlayer.xcodeproj - In XCode, in the project navigator, select your project. Add
libRNAudioRecorderPlayer.ato your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)<
Android
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import package com.dooboolab.audiorecorderplayer.RNAudioRecorderPlayerPackage;to the imports at the top of the file - Add
new RNAudioRecorderPlayerPackage()to the list returned by thegetPackages()method
- Append the following lines to
android/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') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':react-native-audio-recorder-player')
Post installation
iOS
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.
Android
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...
Methods
All methods are implemented with promises.
| Func | Param | Return | Description |
|---|---|---|---|
| mmss | number milliseconds | string | Convert seconds to minute:second string |
| mmssss | number milliseconds | string | Convert seconds to minute:second:milliseconds string |
| setSubscriptionDuration | number seconds | 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 | void | Removes recordBack listener |
| addPlayBackListener | Function callBack | void | Get callback from native module. Will receive duration, currentPosition |
| removePlayBackListener | void | Removes playback listener | |
| startRecorder | <string> uri? AudioSet? <AudioSet> | 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). |
Able to customize recorded audio quality (from 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});Default Path
- Default path for android uri is
{cacheDir}/sound.mp4. - Default path for ios uri is
{cacheDir}/sound.m4a.
Usage
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};
TIPS
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);
Try yourself
- Goto
Examplefolder by runningcd Example. - Run
yarn install && yarn start. - Run
yarn iosto run on ios simulator andyarn androidto run on your android device.
Special Thanks
mansya - logo designer.
Help Maintenance
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.