react-native-track-player 세팅하기 #1

React Native Track Player

React Native Track Player(RNTP)를 이용하여 백그라운드 모드에서도 음악을 재생할 수 있는 음악플레이어 앱을 만들려고 합니다!

 

이 글은 세팅과정에 관련한 부분만을 다루고있습니다!

RNTP는 EventListner함수들을 통해서 앱내부 및 외부에서 이벤트를 전달받아 관련한 기능들을 수행하는 형태로 되어있습니다.

 

해서 ReactNative의 최상층이라고 할 수 있는 index.js에서 RNTP를 위한 서비스를 등록하고 시작하여야 합니다.

index.js 세팅

TrackPlayer를 불러온 다음 registerPlaybackService를 통해서 재생 시 실행할 서비스파일을 등록해 줍니다.

플랫폼 세팅으로는 iOS의 경우 Xcode를 켜서 백그라운드모드를 추가해 주고 거기서 Audio, AirPlay, and Picture in Picture를 체크해 줍니다.

다음으로는 playbackService.ts 에서 각 이벤트 등록과 TrackPlayer에서 기본적으로 제공할 옵션들을 설정합니다.

import TrackPlayer, {
  AppKilledPlaybackBehavior,
  Capability,
  RepeatMode,
  Event,
  Track,
} from 'react-native-track-player';

export async function setupPlayer() {
  let isSetup = false;
  try {
    await TrackPlayer.getCurrentTrack();
    isSetup = true;
  } catch {
    await TrackPlayer.setupPlayer();
    await TrackPlayer.updateOptions({
      android: {
        appKilledPlaybackBehavior:
          AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
      },
      capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.SeekTo,
      ],
      compactCapabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
      ],
      progressUpdateEventInterval: 1,
    });

    isSetup = true;
  } finally {
    return isSetup;
  }
}

export async function addTracks(list: Track[]) {
  await TrackPlayer.add(list);
  await TrackPlayer.setRepeatMode(RepeatMode.Off);
}

export async function playbackService() {
  // TODO: 원격 이벤트 등록하기
  try {
    TrackPlayer.addEventListener(Event.RemotePlay, () => {
      // 재생 버튼 클릭시
    });

    TrackPlayer.addEventListener(Event.RemotePause, () => {
      // 일시정지 버튼 클릭시
    });

    TrackPlayer.addEventListener(Event.RemoteNext, () => {
      // 다음 음악재생 버튼 클릭시
    });

    TrackPlayer.addEventListener(Event.RemotePrevious, () => {
      // 이전 음악재생 버튼 클릭시
    });

    TrackPlayer.addEventListener(Event.RemoteSeek, e => {
      // 플레이어 시간 변경시
    });

    TrackPlayer.addEventListener(Event.RemoteStop, () => {
      // 정지 버튼 클릭시
    });
  } catch (error) {}
}

setupPlayer함수를 통해서 플레이어를 초기화하고 이후 addTracks를 통해서 트랙들을 업데이트해줍니다.

playbackService함수에서 이벤트가 빠지게 되면 해당 이벤트는 발현할 수 없으니 주의해서 사용하세요!

예를 들어, Event.RemoteNext가 빠지게 된다면

RNTP세팅에서 capabilities에 Capability.SkipToNext가 있더라도 반응하지 않습니다!

 

이렇게 초기세팅을 하고 이제 데이터를 연동해주시면 됩니다!

 

오늘은 RNTP 초기 세팅에 대해서 알아보았습니다

모두들 Happy Hacking! 하세요! ⭐️