Author - StudySection Post Views - 57 views
react

React-Native Audio Recorder Player

React Native Libraries

React Native provides various libraries to handle voice recordings. React-native-audio-recorder-player is one of the react-native libraries to record audio. It provides both the play and record feature on both android and ios platforms. This module can also handle the audio from a web URL.

Following is the brief documentation to use this module:

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

For iOS Platform:
$ cd ios && pod install && cd ..

On iOS and Android you need to add the following permissions in info.plist and AndroidManifest.xml respectively:
iOS

<key>NSMicrophoneUsageDescription</key>
<string>Allow application to use Microphone.</string>

Android

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Usage:

import AudioRecorderPlayer from 'react-native-audio-recorder-player';
const audioRecorderPlayer = new AudioRecorderPlayer();

onStartRecord = async () => { //function to start recording .
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 () => { //function to stop record
const result = await this.audioRecorderPlayer.stopRecorder();
this.audioRecorderPlayer.removeRecordBackListener();
this.setState({
recordSecs: 0,
});
console.log(result);
};

onStartPlay = async () => { //function to play an audio after recording it.
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 () => { //function to pause an audio
await this.audioRecorderPlayer.pausePlayer();
};

onStopPlay = async () => { //function to stop playing an audio
console.log('onStopPlay');
this.audioRecorderPlayer.stopPlayer();
this.audioRecorderPlayer.removePlayBackListener();
};

If you want to play audio from URL then you can use it like below code:

onStartPlay = async () => { //function to play an audio after recording it.
console.log('onStartPlay');
const msg = await this.audioRecorderPlayer.startPlayer(url);//you just need to pass a url inside this startPlayer function.
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 () => { //function to pause an audio
await this.audioRecorderPlayer.pausePlayer();
};

onStopPlay = async () => { //function to stop playing an audio
console.log('onStopPlay');
this.audioRecorderPlayer.stopPlayer();
this.audioRecorderPlayer.removePlayBackListener();
};

This was a simple implementation of basic functions that can be used in any react native project where we need audio record/play functionality. You just need to paste these functions into your js file and link with the buttons of your choice of design.

For more information, you can check this link.

People having good knowledge of Financial accounting can get an Accounting Certification from StudySection to increase their chances of getting a job in this field. You can get a foundation level certification if you are new to Financial accounting or you can go for advanced level certification if you have expert level skills in Financial accounting.

Leave a Reply

Your email address will not be published. Required fields are marked *