[React Native] react-native-sound API SoundPlayer 사용

React Native react-native-sound API SoundPlayer 사용

React Native 앱 개발을 하면서 음악 재생 기능을 사용하는 경우가 생기는데요,

react-native-sound API을 사용해서 SoundPlayer를 만들어 보겠습니다.

 

자세한 설명은 아래 링크를 참조하시면 더 많은 기능과 사용법을 아실 수 있습니다.

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

react-native-sound

 

저는 기본적인 음악 재생과 멈춤 정도만 보여드리겠습니다.

 

React Native functional component hooks를 사용해서 만들었습니다.

 

우선 react-native-sound를 설치하겠습니다.

npm install react-native-sound --save

cd ios && pod install && cd ..

 

아래는 제가 작성한 코드입니다.

재생과 멈춤 아이콘(ICON)을 사용해서 버튼을 누르면 동작하도록 하였습니다, 

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Entypo';
import Sound from 'react-native-sound';

const path = '/Users/dlee/Downloads/test.mp3';

let music = new Sound(path, null, (error) => {
    if (error) { console.log('play failed') }
})

const SoundAPI = () => {

    return(
        <View style={styles.container}>
            <Icon
                onPress={() => { music.play() }}
                name={"controller-play"}
                size={40}/>
            <Icon 
                onPress={() => { music.pause() }}
                name={"controller-paus"}
                size={40}/>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: 100,
        alignItems: 'center',
        justifyContent: 'space-around',
        backgroundColor: 'lightgrey',
        opacity: 0.3,
        flexDirection: 'row'
    }
})

export default SoundAPI;

시뮬레이터 화면입니다.

 

로컬에 있는 파일을 경로로 사용하였습니다.

필요하시면 RNFetchBlob, DocumentPicker 등을 사용하셔서 더 많은 기능을 추가하시면 됩니다.