[RN] React Native Recording Player stopReocrder 메서드 동작 문제

1. 문제 발생

  사이드 프로젝트로 진행하고 있는 인생 퍼즐에서 음성 녹음 기능 구현 중 react-native-record-player의 stopRecorder 메서드가 동작하지 않는 문제 발생했다. stopRecorder의 결과는 녹음이 이미 중지되었다고 떴으나 녹음 시간 및 파일의 크기는 계속 증가했다.

 

  1. 발생 코드

 

  const PuzzleWritingVoice = (): JSX.Element => {
    const audioRecorderPlayer = new AudioRecorderPlayer();

    const onStartRecord = async function () {
    const path = 'sound.m4a';
    const audioSet = {
      AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
      AudioSourceAndroid: AudioSourceAndroidType.MIC,
      AVModeIOS: AVModeIOSOption.measurement,
      AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
      AVNumberOfChannelsKeyIOS: 2,
      AVFormatIDKeyIOS: AVEncodingOption.aac,
    };

    await audioRecorderPlayer.startRecorder(path, audioSet);
    audioRecorderPlayer.addRecordBackListener(e => {
      setRecordState({
        ...recordState,
        recordSecs: e.currentPosition,
        recordTime: audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)),
      });
    });
  };

  const onStopRecord = async function () {
    const result = await audioRecorderPlayer.stopRecorder();
    audioRecorderPlayer.removeRecordBackListener();
    setRecordState({...recordState, recordSecs: 0});
    console.log(result);
  };
  };

 

2. 문제 원인 및 해결

  1. 문제 원인
    State 변화로 랜더링이 다시 되면서 PuzzleWritingVoice가 다시 호출된 것으로 보인다. 그 과정에서 기존 객체의 주소는 잃게 되고 새로운 객체 AutioRecordingPlayer 생성 및 주소값이 변수에 할당된다. 그래서 동작하고 있는 객체 주소 소실로 인해 stopRecorder 메서드 수행을 할 수 없게 되어 정상적으로 동작하지 않은 것처럼 보인 것이다.

 

  2. 문제 해결
    AudioRecordingPlaye 객체 생성 및 변수에 할당을 외부로 꺼냈다. 이로인해 PuzzleWirtingVoice에서 접근은 유지하며 랜더링 때마다 새로운 객체 생성을 막을 수 있었다.

 

  3. 해결 코드

 

  const audioRecorderPlayer = new AudioRecorderPlayer();

  const PuzzleWritingVoice = (): JSX.Element => {

    const onStartRecord = async function () {
    const path = 'sound.m4a';
    const audioSet = {
      AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
      AudioSourceAndroid: AudioSourceAndroidType.MIC,
      AVModeIOS: AVModeIOSOption.measurement,
      AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
      AVNumberOfChannelsKeyIOS: 2,
      AVFormatIDKeyIOS: AVEncodingOption.aac,
    };

    ...(생략)...
 };