React Native에서 Sound 재생하기

목표

특정 상황에서 간단한 (비프음처럼) 사운드 파일을 재생하고 싶음

1차시도

react-native-sound-player 를 살펴보니 단순하고 쉬워서 어려움이 없을 줄 알았다.

yarn add react-native-sound-player

import SoundPlayer from 'react-native-sound-player'

try {
    // play the file tone.mp3
    SoundPlayer.playSoundFile('tone', 'mp3')
    // or play from url
    SoundPlayer.playUrl('<https://example.com/music.mp3>')
} catch (e) {
    console.log(`cannot play the sound file`, e)
}

프로젝트 내 mp3 파일을 재생하려면 {project_root}/android/app/src/main/res/raw/ 에 mp3 파일들을 집어 넣고 playSoundFile() 에서 파일명을 인자로 주면 끝.... 인줄 알았다.

난관

TypeError: null is not an object (evaluating 'RNSoundPlayer.playSoundFile')

위의 에러가 나면서 SoundPlayer.playSoundFile('tone', 'mp3') 이거 한줄 실행시키는 것이 시간이 많이 걸리게 되었다.

에러 내용은 null 은 오브젝트가 아니다? 인데 아니긴 아닌데 대체 어디가 아니라는 건지. 리액트도 처음이고 리액트 네이티브도 처음인 나에겐 감이 안왔다. 그래도 대충 SoundPlayer 아니면 function 인 playSoundFile 이 둘중 하나일텐데 단순 null pointer exception 같은 건도 아니니깐 playSoundFile 일 것 같은데.

구글링을 해보는데 RNSoundPlayer 자리는 각자의 참조하는 형태에 따라 다른것 같고 playSoundFile 자리가 null 로 되어서 발생하는 문제가 맞는 것 같았다.

문제는 다른 사람의 패키지 인데 왜 null 일까?

우회

우선 react-native-sound-player 패키지에서 null 문제 해결책은 구글링으로 찾지 못하여서 다른 사운드 패키지를 찾았다. 내가 하고 싶은건 사운드 재생이지 저 패키지 문제 대응이 아니기 때문이다.

그런데 아래의 몇몇가지 패키지를 설치후 사용해봤는데 전부 위와 같은 에러가 나면서 안되었다.

• react-native-sound
• react-native-audio-recorder-player
• react-native-track-player

그리고 한두개 정도 더 사용해본것 같은데 그 때쯤에는 정신적으로도 지치고 시간적으로도 쫓겨서 제정신이 아니었다. 그냥 마구 마구 갖다 붙여보고 안되면 넘기고.

이렇게 까지 안될 만한 건 아닌데 왜 안되는 건지? 패키지 문제가 아닌 다른데서 찾을 필요가 있었다.

해결

우선 여러개의 패키지들 문서를 살펴보면 특별한 건 없었지만 npm install 외에 manual install 을 언급한 부분들이 있었다.

react-native-sound-player 문서에서는 없었지만 비슷하게 해볼 수 있을 것 같았다. 왜냐하면 그냥 null 일것 같지 않고 뭔가가 link 가 끊기지 않았을까 추정되었기 때문이다. 나 빼고는 다른 사람들은 잘 사용하고 있는 것 같은데 나만 문제이기에 😭

include ':react-native-sound-player'
project(':react-native-sound-player').projectDir = new File(rootProject.projectDir,    '../node_modules/react-native-sound-player/android')

dependencies {
...
	compile project(':react-native-sound-player')
}

위 2개를 추가해주었다.

아이디어는 react-native-audio-recorder-player 문서에서 따와서 비슷하게 이름만 바꿨더니 해결되었다.

새로운 의문

우선 해결법을 찾은것 같아서 기뻤고 이 내용을 정리하기 위해 글을 쓰는 과정에서 새로운 프로젝트를 생성했다. 그래서 저 에러를 유발하기 위해

yarn add react-native-sound-player

이것만 하고 sound play 를 해보니. 이젠 에러가 나질 않는다.

manual install 을 해준 프로젝트도 아닌데 이제 잘된다.

이게 아마 global package에도 영향을 주는건가 싶은데 java scrpt 의 세계는 신비롭기만 하다.