# nunlup-services-audio

> React Native Audio Recorder and Player.

Latest version **2.2.0** (published 2019-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install nunlup-services-audio
pnpm add nunlup-services-audio
yarn add nunlup-services-audio
bun add nunlup-services-audio
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2019-07-23 |
| First published | 2019-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 84.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 961 |
| Author | dooboolab |
| Maintainers | rafaelnep |
| Keywords | react-native, audio, sound, record, recorder, player |

## Links

- npm: https://www.npmjs.com/package/nunlup-services-audio
- Repository: https://github.com/dooboolab/react-native-audio-recorder-player
- Homepage: https://github.com/dooboolab/react-native-audio-recorder-player#readme
- Issues: https://github.com/dooboolab/react-native-audio-recorder-player/issues
- npm.io page: https://npm.io/package/nunlup-services-audio

## Dependencies (1)

- [dooboolab-welcome](https://npm.io/package/dooboolab-welcome.md) ^1.1.0

## Recent versions

- 2.2.0 (latest) — 2019-07-23

## README

# react-native-audio-recorder-player

<img src="Logotype Primary.png" width="70%" height="70%" />

[![Npm Version](http://img.shields.io/npm/v/react-native-audio-recorder-player.svg?style=flat-square)](https://npmjs.org/package/react-native-audio-recorder-player)
[![Downloads](http://img.shields.io/npm/dm/react-native-audio-recorder-player.svg?style=flat-square)](https://npmjs.org/package/react-native-audio-recorder-player)
[![Build Status](https://travis-ci.com/dooboolab/react-native-audio-recorder-player.svg?branch=master)](https://travis-ci.com/dooboolab/react-native-audio-recorder-player) [![Greenkeeper badge](https://badges.greenkeeper.io/dooboolab/react-native-audio-recorder-player.svg)](https://greenkeeper.io/)
![License](http://img.shields.io/npm/l/react-native-audio-recorder-player.svg?style=flat-square)

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](https://medium.com/@dooboolab/react-native-audio-recorder-and-player-4aa5f26a666).

## Breaking Changes
* Migrated to Android X in `2.2.0`. Please check the [Migration Guide](#migration-guide).

 ## Migration Guide
To migrate to `2.2.0` you must migrate your Android app to Android X by following the [Migrating to AndroidX Guide](https://developer.android.com/jetpack/androidx/migrate).

## Preview
<img src="https://firebasestorage.googleapis.com/v0/b/flutterdart-5d354.appspot.com/o/react-native-audio-recorder-player.gif?alt=media&token=2bff9eeb-bab6-4265-918b-aa0c83ae0faf"/>


## 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

`$ react-native link react-native-audio-recorder-player`

### Manual installation


#### iOS

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-audio-recorder-player` and add `RNAudioRecorderPlayer.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNAudioRecorderPlayer.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. 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
2. 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')
  	```
3. 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`:

```xml
<key>NSMicrophoneUsageDescription</key>
<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`:

```xml
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
```
Also, android above `Marshmallow` needs runtime permission to record audio. Using [react-native-permissions](https://github.com/yonahforst/react-native-permissions) will help you out with this problem. Below is sample usage before when started the recording.
```javascript
if (Platform.OS === 'android') {
  const micPermission: string = await checkPermission('microphone');
  console.log('micPermission', micPermission);
  if (micPermission !== 'authorized') {
    const micRequest: string = await requestPermission('microphone');
    console.log('micRequest', micRequest);
    if (micRequest !== 'authorized') {
      return;
    }
  }
  const storagePermission: string = await checkPermission('storage');
  if (storagePermission !== 'authorized') {
    const storageRequest: string = await requestPermission('storage');
    if (storageRequest !== 'authorized') {
      return;
    }
  }
}
```

## 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). |

## Default Path
* Default path for android uri is `sdcard/sound.mp4`.
* Default path for ios uri is `sound.m4a`.

## Usage
```javascript
import AudioRecorderPlayer from 'react-native-audio-recorder-player';

const audioRecorderPlayer = new AudioRecorderPlayer();

onStartRecord = async () => {
  const result = await this.audioRecorderPlayer.startRecorder();
  this.audioRecorderPlayer.addRecordBackListener((e) => {
    this.setState({
      recordSecs: e.current_position,
      recordTime: this.audioRecorderPlayer.mmssss(Math.floor(e.current_position)),
    });
    return;
  });
  console.log(result);
}

onStopRecord = async () => {
  const result = await this.audioRecorderPlayer.stopRecorder();
  this.audioRecorderPlayer.removeRecordBackListener();
  this.setState({
    recordSecs: 0,
  });
  console.log(result);
}

onStartPlay = async () => {
  console.log('onStartPlay');
  const msg = await this.audioRecorderPlayer.startPlayer();
  console.log(msg);
  this.audioRecorderPlayer.addPlayBackListener((e) => {
    if (e.current_position === e.duration) {
      console.log('finished');
      this.audioRecorderPlayer.stopPlayer();
    }
    this.setState({
      currentPositionSec: e.current_position,
      currentDurationSec: e.duration,
      playTime: this.audioRecorderPlayer.mmssss(Math.floor(e.current_position)),
      duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)),
    });
    return;
  });
}

onPausePlay = async () => {
  await this.audioRecorderPlayer.pausePlayer();
}

onStopPlay = async () => {
  console.log('onStopPlay');
  this.audioRecorderPlayer.stopPlayer();
  this.audioRecorderPlayer.removePlayBackListener();
}
```

## 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.
```javascript
const path = Platform.select({
  ios: 'hello.m4a',
  android: 'sdcard/hello.mp4', // should give extra dir name in android. Won't grant permission to the first level of dir.
});
const 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
1. Goto `Example` folder by running `cd Example`.
2. Run `npm install && npm start`.
3. Run `npm run ios` to run on ios simulator and `npm run android` to run on your android device.

### TODO
- [ ] Better android permission handling
- [x] Volume Control
- [x] Sync timing for recorder callback handler

## Special Thanks
[mansya](https://github.com/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.
<br/>
<a href="https://www.buymeacoffee.com/dooboolab" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
[![Paypal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png)](https://paypal.me/dooboolab)

---
_Source: https://npm.io/package/nunlup-services-audio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._