Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-audio-recorder-player

Package Overview
Dependencies
Maintainers
1
Versions
112
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-audio-recorder-player

React Native Audio Recorder and Player.

  • 3.6.12
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
20K
decreased by-2.72%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-audio-recorder-player

yarn Version Downloads CI publish-package License supports iOS supports Android code style: prettier 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.

Preview

Free read

Breaking Changes

  • 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.

    1. Codebase has been re-written to kotlin for Android and swift for iOS. Please follow the post installation for this changes.

      [iOS]

    2. pauseRecorder and resumeRecorder features are added.

      • Caveat Android now requires minSdk of 24.
    3. Renamed callback variables.

      export type RecordBackType = {
        isRecording?: boolean;
        currentPosition: number;
        currentMetering?: number;
      };
      
      export type PlayBackType = {
        isMuted?: boolean;
        currentPosition: number;
        duration: number;
      };
      
    4. 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.

Migration Guide

1.x.x2.x.x & 3.x.x
startRecordstartRecorder
pauseRecorder (3.x.x)
resumeRecorder (3.x.x)
stopRecordstopRecorder
startPlaystartPlayer
stopPlaystopPlayer
pausePlaypausePlayer
resumeresumePlayer
seekToseekToPlayer
setSubscriptionDuration
addPlayBackListeneraddPlayBackListener
setRecordIntervaladdRecordBackListener
removeRecordInterval``
setVolume

Getting started

$ yarn add react-native-audio-recorder-player

Installation

Using React Native >= 0.61

[iOS only]

npx pod-install
Using React Native < 0.60

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

Manual installation

iOS
  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-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 PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<
Android
  1. 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 the getPackages() method
  1. 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')
    
  2. 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:

<key>NSMicrophoneUsageDescription</key>
<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.

1
Android

On Android you need to add a permission to AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<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.

if (Platform.OS === 'android') {
  try {
    const grants = await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
    ]);

    console.log('write external storage', grants);

    if (
      grants['android.permission.WRITE_EXTERNAL_STORAGE'] ===
        PermissionsAndroid.RESULTS.GRANTED &&
      grants['android.permission.READ_EXTERNAL_STORAGE'] ===
        PermissionsAndroid.RESULTS.GRANTED &&
      grants['android.permission.RECORD_AUDIO'] ===
        PermissionsAndroid.RESULTS.GRANTED
    ) {
      console.log('Permissions granted');
    } else {
      console.log('All required permissions not granted');
      return;
    }
  } catch (err) {
    console.warn(err);
    return;
  }
}

Lastly, you need to enable kotlin. Please change add the line below in android/build.gradle.

buildscript {
  ext {
      buildToolsVersion = "29.0.3"
+     // Note: Below change is necessary for pause / resume audio feature. Not for Kotlin.
+     minSdkVersion = 24
      compileSdkVersion = 29
      targetSdkVersion = 29
+     kotlinVersion = '1.6.10'

      ndkVersion = "20.1.5948944"
  }
  repositories {
      google()
      jcenter()
  }
  dependencies {
      classpath("com.android.tools.build:gradle:4.2.2")
  }
...

Methods

All methods are implemented with promises.

FuncParamReturnDescription
mmssnumber secondsstringConvert seconds to minute:second string
setSubscriptionDurationvoidSet default callback time when starting recorder or player. Default to 0.5 which is 500ms
addRecordBackListenerFunction callBackvoidGet callback from native module. Will receive currentPosition, currentMetering (if configured in startRecorder)
removeRecordBackListenerFunction callBackvoidRemoves recordBack listener
addPlayBackListenerFunction callBackvoidGet callback from native module. Will receive duration, currentPosition
removePlayBackListenerFunction callBackvoidRemoves playback listener
startRecorder<string> uri? <boolean> meteringEnabled?Promise<void>Start recording. Not passing uri will save audio in default location.
pauseRecorderPromise<string>Pause recording.
resumeRecorderPromise<string>Resume recording.
stopRecorderPromise<string>Stop recording.
startPlayerstring uri? Record<string, string> httpHeaders?Promise<string>Start playing. Not passing the param will play audio in default location.
stopPlayerPromise<string>Stop playing.
pausePlayerPromise<string>Pause playing.
seekToPlayernumber millisecondsPromise<string>Seek audio.
setVolumedouble valuePromise<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.

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

const uri = await this.audioRecorderPlayer.startRecorder(
  path,
  audioSet,
  meteringEnabled,
);

this.audioRecorderPlayer.addRecordBackListener((e: any) => {
  this.setState({
    recordSecs: e.currentPosition,
    recordTime: this.audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)),
  });
});

Default Path

  • Default path for android uri is {cacheDir}/sound.mp4.
  • Default path for ios uri is {cacheDir}/sound.m4a.

Usage

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.currentPosition,
      recordTime: this.audioRecorderPlayer.mmssss(
        Math.floor(e.currentPosition),
      ),
    });
    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) => {
    this.setState({
      currentPositionSec: e.currentPosition,
      currentDurationSec: e.duration,
      playTime: this.audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)),
      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.

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

import ReactNativeBlobUtil from 'react-native-blob-util'
...
const dirs = ReactNativeBlobUtil.fs.dirs;
const path = Platform.select({
  ios: 'hello.m4a',
  android: `${dirs.CacheDir}/hello.mp3`,
});

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.

To pass in specific URI in IOS, you need to append file:// to the path. As an example using RFNS.

import RNFetchBlob from 'rn-fetch-blob';
...
const dirs = RNFetchBlob.fs.dirs;
const path = Platform.select({
  ios: `file://${RNFS.DocumentDirectoryPath}/hello.m4a`,
  android: `${this.dirs.CacheDir}/hello.mp3`,
});

const uri = await audioRecorderPlayer.startRecord(path);

react-native-file-access

import { Dirs } from "react-native-file-access";
...
const path = Platform.select({
  ios: 'hello.m4a',
  android: `${Dirs.CacheDir}/hello.mp3`,
});

const uri = await audioRecorderPlayer.startRecord(path);

Try yourself

  1. Goto Example folder by running cd Example.
  2. Run yarn install && yarn start.
  3. Run yarn ios to run on ios simulator and yarn android to 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.
Buy Me A Coffee Paypal

Keywords

FAQs

Package last updated on 17 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc