Installations

npm install @matthiasn/react-native-audio-recorder-player

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

12.8.1

NPM Version

6.10.2 Score

36.8

Supply Chain

53.8

Quality

66

Maintenance

50

Vulnerability

93.6

License

Pull Requests

Open

7

Total

240

Closed

40

Merged

193

Issues

Open

149

Total

384

Closed

235

Releases

48

3.6.12

Published on 17 Oct 2024

3.6.11

Published on 03 Sept 2024

3.6.10

Published on 20 Jun 2024

3.6.9

Published on 11 Jun 2024

3.6.8

Published on 09 Jun 2024

3.6.7

Published on 26 Mar 2024

View all 48 releases

Contributors

50

Unable to fetch Contributors

View all 50 contributors

Languages

11

TypeScript

Swift

Kotlin

Java

C++

Objective-C

Objective-C++

Ruby

JavaScript

Starlark

CMake

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%)

Developer

dooboolab

Download Statistics

Total Downloads

1,795

Last Day

1

Last Week

2

Last Month

8

Last Year

128

GitHub Statistics

739 Stars

431 Commits

218 Forks

8 Watching

4 Branches

50 Contributors

Maintainers

1

Package Meta Information

Latest Version

2.3.0-1

Package Id

@matthiasn/react-native-audio-recorder-player@2.3.0-1

Unpacked Size

97.09 kB

Size

48.57 kB

File Count

24

NPM Version

6.10.2

Node Version

12.8.1

Total Downloads

Cumulative downloads

Total Downloads

1,795

Last day

0%

1

Compared to previous day

Last week

0%

2

Compared to previous week

Last month

166.7%

8

Compared to previous month

Last year

-33.3%

128

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

dooboolab-welcome

Peer Dependencies

2

react react-native

Dev Dependencies

35

Versions

react-native-audio-recorder-player

License

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.

Free read

Happy Blog.

Breaking Changes

There has been vast improvements in #114 which is released in 2.3.0. We now support all RN versions without any version differenciating. See below installation guide for your understanding.

Preview

Migration Guide

1..	2..
`startRecord`	`startRecorder`
`stopRecord`	`stopRecorder`
`startPlay`	`startPlayer`
`stopPlay`	`stopPlayer`
`pausePlay`	`pausePlayer`
`resume`	`resumePlayer`
`seekTo`	`seekToPlayer`
	`setSubscriptionDuration`
`setRecordInterval`	`addRecordBackListener`
`removeRecordInterval`	``
	`setVolume`

Getting started

$ npm install react-native-audio-recorder-player --save

Mostly automatic installation

Using React Native >= 0.60

Linking the package manually is not required anymore with Autolinking.

iOS Platform:

$ cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step

Android Platform with Android Support:

Using Jetifier tool for backward-compatibility.

Modify your android/build.gradle configuration:

buildscript {
  ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 28
    # Only using Android Support libraries
    supportLibVersion = "28.0.0"
  }

Android Platform with AndroidX:

Modify your android/build.gradle configuration:

buildscript {
  ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 28
    # Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
    androidXAnnotation = "1.1.0"
    androidXBrowser = "1.0.0"
    // Put here other AndroidX dependencies
  }

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-player and add RNAudioRecorderPlayer.xcodeproj
In XCode, in the project navigator, select your project. Add libRNAudioRecorderPlayer.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project (Cmd+R)<

Android

Open up android/app/src/main/java/[...]/MainActivity.java

Add import com.dooboolab.RNAudioRecorderPlayerPackage; to the imports at the top of the file
Add new RNAudioRecorderPlayerPackage() to the list returned by the getPackages() 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

On iOS you need to add a usage description to Info.plist:

1<key>NSMicrophoneUsageDescription</key>
2<string>This sample uses the microphone to record your speech and convert it to text.</string>

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" />

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 started the recording.

1if (Platform.OS === 'android') {
2  try {
3    const granted = await PermissionsAndroid.request(
4      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
5      {
6        title: 'Permissions for write access',
7        message: 'Give permission to your storage to write a file',
8        buttonPositive: 'ok',
9      },
10    );
11    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
12      console.log('You can use the storage');
13    } else {
14      console.log('permission denied');
15      return;
16    }
17  } catch (err) {
18    console.warn(err);
19    return;
20  }
21}
22if (Platform.OS === 'android') {
23  try {
24    const granted = await PermissionsAndroid.request(
25      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
26      {
27        title: 'Permissions for write access',
28        message: 'Give permission to your storage to write a file',
29        buttonPositive: 'ok',
30      },
31    );
32    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
33      console.log('You can use the camera');
34    } else {
35      console.log('permission denied');
36      return;
37    }
38  } catch (err) {
39    console.warn(err);
40    return;
41  }
42}

Methods

All methods are implemented with promises.

Func	Param	Return	Description
mmss	`number` seconds	`string`	Convert seconds to `minute:second` string.
addRecordBackListener		`Promise<void>`	Set record interval in second.
addPlayBackListener	`Function` callBack	`void`	Get callback from native module. Will receive `duration`, `current_position`
startRecorder	`<string>` uri?	`Promise<void>`	Start recording. Not passing the param will save audio in default location.
stopRecorder		`Promise<string>`	Stop recording.
startPlayer	`<string>` uri?	`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` seconds	`Promise<string>`	Seek audio.
setVolume	`doulbe` value	`Promise<string>`	Set volume of audio player (default 1.0, range: 0.0 ~ 1.0).

Customizing recorded audio quality (from `2.3.0`)

interface AudioSet {
  AVSampleRateKeyIOS?: number;
  AVFormatIDKeyIOS?: AVEncodingType;
  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.

    const audioSet: AudioSet = {
      AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
      AudioSourceAndroid: AudioSourceAndroidType.MIC,
      AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
      AVNumberOfChannelsKeyIOS: 2,
      AVFormatIDKeyIOS: AVEncodingOption.aac,
    };

    const uri = await this.audioRecorderPlayer.startRecorder(path, audioSet);
    this.audioRecorderPlayer.addRecordBackListener((e: any) => {
      this.setState({
        recordSecs: e.current_position,
        recordTime: this.audioRecorderPlayer.mmssss(
          Math.floor(e.current_position),
        ),
      });
    });

Default Path

Default path for android uri is sdcard/sound.mp4.
Default path for ios uri is 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.current_position,
10      recordTime: this.audioRecorderPlayer.mmssss(
11        Math.floor(e.current_position),
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    if (e.current_position === e.duration) {
34      console.log('finished');
35      this.audioRecorderPlayer.stopPlayer();
36    }
37    this.setState({
38      currentPositionSec: e.current_position,
39      currentDurationSec: e.duration,
40      playTime: this.audioRecorderPlayer.mmssss(Math.floor(e.current_position)),
41      duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)),
42    });
43    return;
44  });
45};
46
47onPausePlay = async () => {
48  await this.audioRecorderPlayer.pausePlayer();
49};
50
51onStopPlay = async () => {
52  console.log('onStopPlay');
53  this.audioRecorderPlayer.stopPlayer();
54  this.audioRecorderPlayer.removePlayBackListener();
55};

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.

1const path = Platform.select({
2  ios: 'hello.m4a',
3  android: 'sdcard/hello.mp4', // should give extra dir name in android. Won't grant permission to the first level of dir.
4});
5const 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.

Try yourself

Goto Example folder by running cd Example.
Run npm install && npm start.
Run npm run ios to run on ios simulator and npm run android to run on your android device.

TODO

Better android permission handling
Volume Control
Sync timing for recorder callback handler

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.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

3

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

1

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

3.5

/10

Last Scanned on 2024-12-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@matthiasn/react-native-audio-recorder-player

Installations

Developer Guide

Yes

CommonJS

12.8.1

6.10.2

Score

Pull Requests

7

240

40

193

Issues

149

384

235

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

dooboolab

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

1,795

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-native-audio-recorder-player

Free read

Breaking Changes

Preview

Migration Guide

Getting started

Mostly automatic installation

Using React Native >= 0.60

Using React Native < 0.60

Manual installation

iOS

Android

Post installation

Methods

Customizing recorded audio quality (from 2.3.0)

Default Path

Usage

TIPS

Try yourself

TODO

Special Thanks

Help Maintenance

10

10

9

4

3

1

0

0

0

0

0

0

3.5

/10

Customizing recorded audio quality (from `2.3.0`)