I'm trying to record audio in react native app using package react-native-audio-recorder-player. Audio recording starts successfully but keep recording even after calling stopRecorder().
Tried number of solutions from gitHub but nothing helping. Here is my code
import React from 'react';
import { View, TouchableOpacity, Text} from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';
export const Recorder = () => {
const audioRecorderPlayer = new AudioRecorderPlayer();
const onStartRecord = async () => {
await audioRecorderPlayer.startRecorder();
audioRecorderPlayer.addRecordBackListener(e => {
console.log('Recording . . . ', e.current_position);
return;
});
};
const onStopRecord = async () => {
const audio = await audioRecorderPlayer.stopRecorder();
audioRecorderPlayer.removeRecordBackListener();
};
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'space-between'}}>
<TouchableOpacity onPress={onStartRecord}>
<Text>Start</Text>
</TouchableOpacity>
<TouchableOpacity onPress={onStopRecord}>
<Text>Stop</Text>
</TouchableOpacity>
</View>
);
};
Even after pressing Stop, console is still getting Recording . . ., following is my console.
For this work, need to add const audioRecorderPlayer = new AudioRecorderPlayer();
outside the component. So, component will look like this.
import React from 'react';
import { View, TouchableOpacity, Text} from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';
const audioRecorderPlayer = new AudioRecorderPlayer();
export const Recorder = () => {
const onStartRecord = async () => {
await audioRecorderPlayer.startRecorder();
audioRecorderPlayer.addRecordBackListener(e => {
console.log('Recording . . . ', e.current_position);
return;
});
};
const onStopRecord = async () => {
const audio = await audioRecorderPlayer.stopRecorder();
audioRecorderPlayer.removeRecordBackListener();
};
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'space-between'}}>
<TouchableOpacity onPress={onStartRecord}>
<Text>Start</Text>
</TouchableOpacity>
<TouchableOpacity onPress={onStopRecord}>
<Text>Stop</Text>
</TouchableOpacity>
</View>
);
};
After this change, my stopRecorder is working like charm.