[React Native] 녹음 기능 구현하기: 라이브러리 활용 가이드

React Native에서 오디오 녹음 기능의 필요성

React Native에서 오디오 녹음 기능은 음성 메모 앱, 음성 메시징 서비스, 인터뷰 기록 앱 등 프로젝트에서 유용하게 사용됩니다.

React Native는 기본적으로 녹음 기능을 제공하지 않지만, react-native-audio, react-native-sound 또는 react-native-audio-recorder-player 같은 라이브러리를 사용하면 쉽게 구현할 수 있습니다.

이 글에서는 녹음 기능을 구현하기 위해 필요한 라이브러리와 사용법을 단계적으로 설명하겠습니다.

출처: 위키피디아-라이브러리(컴퓨팅)

---

라이브러리별 녹음 기능 구현

1. react-native-audio를 사용한 녹음 구현

react-native-audio는 React Native에서 오디오 녹음을 지원하는 인기 있는 라이브러리 중 하나입니다.

1. 라이브러리 설치

npm install react-native-audio
npx pod-install

2. 권한 추가

• Android
  • android/app/src/main/AndroidManifest.xml에 다음 권한 추가

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

// RECORD_AUDIO: 기기의 마이크에 접근하여 오디오를 녹음할 수 있는 권한
// WRITE_EXTERNAL_STORAGE: 녹음된 파일을 기기의 외부 저장소에(예: SD카드)에 저장할 수 있는 권한

• iOS
  • Info.plist에 다음 키 추가

<key>NSMicrophoneUsageDescription</key> // 마이크 사용 권한 요청을 위한 설명문
<string>We need access to your microphone to record audio.</string>

3. 녹음 기능 구현

import { AudioRecorder, AudioUtils } from 'react-native-audio';
import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

const AudioRecordScreen = () => {
  const [recording, setRecording] = useState(false);
  const [fillPath, setFillPath] = useState(null);
  
  const startRecording = async () => {
    const audioPath = `${AudioUtils.DocumentDirectoryPath}/test.aac`;
    // AudioUtils.DocumentDirectoryPath: 기기의 문서 디렉토리 경로를 제공합니다.
    setFillPath(audioPath);
    
    try {
      await AudioRecorder.prepareRecordingAtPath(audioPath, {
      // AudioRecorder.prepareRecordingAtPath: 녹음 설정을 준비
        sampleRate: 44100, // 녹음의 샘플링 레이트
        Channels: 1, // 단일 채널로 녹음
        AudioQuality: 'High',
        AudioEncoding: 'aac', // AAC 형식으로 저장
      });
      await AudioRecorder.startRecording();
      setRecording(true);
    } catch (error) {
      console.error('Failed to start recording', error);
    }
  };

  const stopRecording = async () => {
    try {
      const fillPath = await AudioRecorder.stopRecording();
      setRecording(false);
      console.log('Recorded fill path:', fillPath);
    } catch (error) {
      console.error('Failed to stop recording', error);
    }
  };
  
  return (
    <View>
      <Button
        title={recording ? 'Stop Recording' : 'Start Recording'}
        onPress={recording ? stopRecording : startRecording}
      />
      {fillPath && <Text>Saved at: {fillPath}</Text>}
      // fillePath &&: fillPath가 존재할 경우 텍스트를 표시
    </View>
  );
);

export default AudioRecordScreen;

2. react-native-audio-recorder-player를 사용한 녹음 및 재생 구현

react-native-audio-recorder-player는 녹음과 재생을 지원하는 사용이 간편한 라이브러리입니다.

1. 라이브러리 설치

npm install react-native-audio-recorder-player
npx pod-install

2. 녹음 및 재생 구현

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';

const audioRecorderPlayer = new AudioRecorderPlayer();

const AudioScreen = () => {
  const [isRecording, setIsRecording] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  
  const onStartRecord = async () => {
    const Path = 'test.mp4';
    await audioRecorderPlayer.startRecorder(path);
    audioRecorderPlayer.addRecordBackListener((e) => {
    // addRecordBackListener: 녹음 중 진행 상황(현재 위치)을 계속 리스닝
      console.log('Recording', e.current_position);
    });
    setIsRecording(true);
  };
  
  const onStopRecord = async () => {
    const result = await audioRecorderPlayer.stopRecorder();
    audioRecorderPlayer.removeRecordBackListener();
    // removeRecordBackListener: 녹음 진행 리스너를 제거
    console.log('Recording stopped and saved at', result);
    setIsRecording(false);
  };
  
  const onStartPlay = async () => {
    const path = 'test.mp4';
    await audioRecorderPlayer.startPlayer(path);
    audioRecorderPlayer.addPlayBackListener((e) => {
    // addPlayBackListener: 재생 중 현재 위치를 리스닝
      console.log('Playing', e.current_position);
    });
    setIsPlaying(true);
  };
  
  const onStopPlay = async () => {
    await audioRecorderPlayer.stopPlayer();
    audioRecorderPlayer.removePlayBackListener();
    // removePlayBackListener: 재생 진행 리스너를 제거
    setIsPlaying(false);
  };
  
  return (
    <View>
      <Button
        title={isRecording ? 'Stop Recording' : 'Start Recording'}
        onPress={isRecording ? onStopRecord : onStartRecord}
      />
      <Button
        title={isPlaying ? 'Stop Playback' : 'Play Recording'}
        onPress={isPlaying ? onStopPlay : onStartPlay}
      />
    </View>
  );
};

export default AudioScreen;

3. 권한 요청 코드 추가 (공통)

녹음 기능에는 마이크 사용 권한이 필요하므로, 권한 요청 코드를 추가해야 합니다.

react-native-permissions 라이브러리를 활용할 수 있습니다.

npm install react-native-permissions
npx pod-install

import { PermissionsAndroid, Platform } from 'react-native';

const requestPermissions = async () => {
  if (Platform.OS === 'android') {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
        title: 'Microphone Permission',
        message: 'This app requires access to your microphone to record audio.',
      }
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  }
  return true;
};

---

라이브러리를 활용한 녹음 기능 구현의 장점

React Native에서 녹음 기능을 구현하기 위해 라이브러리를 사용할 수 있습니다.

각 라이브러리는 사용 목적에 따라 장단점이 있으므로, 프로젝트 요구사항에 맞는 라이브러리를 선택하는 것이 중요합니다.

위에서 다룬 예제는 기초적인 구현을 다룬 것으로, 실제 앱에서는 추가적인 에러 처리 및 사용자 경험(UX)을 고려해야 합니다.