stopRecorder() is not working - react-native-audio-recorder-player

Question

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.

Thury

I keep getting Error occured during initiating recorder even when copying your component. Any suggestions? – Changeup

Answer 1

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.

Thury

I faced the same issue. Above answer is helpfull for me. Thanks bro – Ronnironnica

this is working but when try to get the number of recorded sec then function is calling but not stopping recording. – Holierthanthou

Answer 2

For stopping both recording and playback functionality, you can use React's useCallback hook to create memoized callback functions. Here's how you can structure it:

1. Stopping Playback:

If you want to stop playback, first check whether anything is currently playing. If nothing is playing, simply log a message and exit. If there is an ongoing playback, try stopping the player, remove the playback listener, and update your state.

const onStopPlay = React.useCallback(async () => {
    if (!isPlaying) {
        console.log("Not currently playing.");
        return;
    }
    
    try {
        await audioRecorderPlayer.stopPlayer();
        audioRecorderPlayer.removePlayBackListener();
        setIsPlaying(false);
        console.log("Stopped playback.");
    } catch (error) {
        console.error("Error stopping the playback:", error);
    }
}, []);

you can use isPlaying, audioRecorderPlayer, setIsPlaying in the dependency []

2. Stopping Recording:

For stopping the recording, you can directly attempt to stop the recorder, remove the record back listener, and then update your state.

const onStopRecord = React.useCallback(async () => {
    try {
        const result = await audioRecorderPlayer.stopRecorder();
        audioRecorderPlayer.removeRecordBackListener();
        setIsRecording(false);
        console.log("Stopped recording:", result);
    } catch (error) {
        console.error("Error stopping the recording:", error);
    }
}, []);

you can use audioRecorderPlayer, setIsRecording in the dependency []

Remember to include dependencies like isPlaying, audioRecorderPlayer, and setIsPlaying in the dependency array of the useCallback hook for the appropriate callbacks to ensure they always reference the most recent state and props.

Mandler