본문 바로가기
front-end/React Native

[RN] react-native-sound 사용하기

by -제이리 2023. 2. 21.
728x90
320x100

현재 진행하고 있는 프로젝트에서 사운드를 재생해야하는 작업이 있는데 처음 시도해보는거라 이것저것 찾아보다

react-native-sound 라이브러리를 알게 되었다. 다른 사운드플레이어 라이브러리가 있었지만 react-native-sound 라이브러리가 제일 대중적으로 쓰이는것 같아 선택하게 되었다.

 

https://www.npmjs.com/package/react-native-sound

 

react-native-sound

React Native module for playing sound clips on iOS, Android, and Windows. Latest version: 0.11.2, last published: a year ago. Start using react-native-sound in your project by running `npm i react-native-sound`. There are 63 other projects in the npm regis

www.npmjs.com

 

🎹  설치방법

npm install react-native-sound --save

 

처음 설치를 하면

undefined is not an object (evaluating 'RNSound.IsAndroid')

위와 같은 에러가 뜰 수 있는데 재 빌드하면 간단하게 해결되는것 같다.

 

🎹 사용방법

1. 로컬파일 사용시 저장경로

(1)안드로이드: android/app/src/main/res/raw (raw폴더는 새로 생성해준다.)

주의사항: 파일명이 소문자 & _(언더스코어) 사용 (예: 'happy_birthday.mp3'), 하위폴더는 지원x

(2) ios: Xcode를 열고 사운드 파일을 프로젝트에 추가(프로젝트를 마우스 오른쪽 버튼으로 클릭하고 선택 Add Files to [PROJECTNAME]).

 

import Sound from 'react-native-sound';

 

로컬파일 사용시엔 두번째 파라미터에 Sound.MAIN_BUNDLE 를 적어주고

url로 재생할 시엔 null를 적어주면 된다.

// 로컬파일 
const music = new Sound('piano.mp3', Sound.MAIN_BUNDLE, error => {
 if(error){
	console.log('Error loading sound: ' + error);
	return;
  }
});

// url
const music = new Sound('https://www.블라블라', null, error => {
 if(error){
	console.log('Error loading sound: ' + error);
	return;
  }
});

 

기본 메소드(더 알아보고 싶다면.. https://github.com/zmxv/react-native-sound)

// 멈춤
music.pause(); 

// 처음부터 재생
music.stop(() => {
  music.play();
});

//재생
music.play();

 

 

참고사이트 https://alexb72.medium.com/how-to-add-sound-to-react-native-8ef152ba1a6

728x90
320x100

댓글