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,
};
...(생략)...
};
'트러블슈팅' 카테고리의 다른 글
[ 인생퍼즐 ] 안드로이드 Recoil 사용할 때 글자 깨짐 (0) | 2022.09.11 |
---|---|
[ 인생퍼즐 ] RN Navigation 화면 남는 문제 (0) | 2022.08.22 |
[RN] Android Permission "never_ask_again"일 때 권한 허락 (0) | 2022.04.10 |
Carla Simulator Nav(format - bin) 파일 생성 방법 (0) | 2022.03.02 |