Example of React Native Sound NPM Package

Hello guys, In today’s tutorial we would learn about React Native Sound NPM package. The react native sound package is used in react native to Play sound files. Using the sound package we can play MP3, AAC and WAV format audio files. The sound package gives us the functionality to Play, Pause, Stop, drag and drop and many functions. You can see the list of all functions comes with sound package here. The best thing of this package is that we can easily play sound files locally and online.

Contents in this project Example of React Native Sound NPM Package :-

1. First of all we have to install the React Native Sound package in our react native project. So open your project’s main Root directory in Command Prompt or Terminal and execute below command.

npm install react-native-sound --save

1	npm install react-native-sound --save

2. Now this step is only for iOS users, In our iOS RN project we have to install PODS to link the package with project. So execute the below command in iOS only.

cd ios && pod install && cd ..

1	cd ios && pod install && cd ..

3. Now we have to start coding for the app. So open your project’s main App.js file and import useEffect, View, StyleSheet, Platform, TouchableOpacity and Text component.

import React, { useEffect } from 'react';

import { View, StyleSheet, Platform, TouchableOpacity, Text } from 'react-native';

import React, { useEffect } from 'react';

import { View, StyleSheet, Platform, TouchableOpacity, Text } from 'react-native';

4. Import Sound from react native sound package.

import Sound from 'react-native-sound';

1	import Sound from 'react-native-sound';

5. Creating our main Export default App.

export default function App() {



}

export default function App() {

}

6. Now we have to create 2 local variables named as control_Local and control_Online. We would use each of them as Sound object to play local and online sound files.

  let control_Local, control_Online;

1	let control_Local, control_Online;

7. Creating 1 variable named as localSound to hold the local sound file path.

  let localSound = require('./sounds/advertising.mp3');

1	let localSound = require('./sounds/advertising.mp3');

8. Creating another variable named as onlineSound to hold online sound URL.

  let onlineSound = 'https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/advertising.mp3';

1	let onlineSound = 'https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/advertising.mp3';

9. Creating useEffect() method which works as component did mount and here we would release the sound controller.

  useEffect(() => {
    Sound.setCategory('Playback', true); // true = mixWithOthers
    return () => {
      if (control_Local) control_Local.release();
      if (control_Online) control_Online.release();
    };
  }, []);

useEffect(() => {

Sound.setCategory('Playback', true); // true = mixWithOthers

return () => {

if (control_Local) control_Local.release();

if (control_Online) control_Online.release();

};

}, []);

10. Creating 2 functions named as playSound_Local() and playSound_onLine() to play sound files.

  const playSound_Local = () => {

    control_Local = new Sound(localSound, (error, _sound) => {
      if (error) {
        alert('error' + error.message);
        return;
      }
      control_Local.play(() => {
        control_Local.release();
      });
    });

  }

  const playSound_onLine = () => {

    control_Online = new Sound(onlineSound, '', (error, _sound) => {
      if (error) {
        alert('error' + error.message);
        return;
      }
      control_Online.play(() => {
        control_Online.release();
      });
    });

  }

const playSound_Local = () => {

control_Local = new Sound(localSound, (error, _sound) => {

if (error) {

alert('error' + error.message);

return;

}

control_Local.play(() => {

control_Local.release();

});

}

const playSound_onLine = () => {

control_Online = new Sound(onlineSound, '', (error, _sound) => {

if (error) {

alert('error' + error.message);

return;

}

control_Online.play(() => {

control_Online.release();

});

}

11. Creating 2 more functions to STOP sound file from playing.

  const stopSound_Local = () => {

    control_Local.stop(() => {
      console.log('Stop Playing...');
    });

  }

  const stopSound_onLine = () => {

    control_Online.stop(() => {
      console.log('Stop Playing...');
    });

  }

const stopSound_Local = () => {

control_Local.stop(() => {

console.log('Stop Playing...');

});

}

const stopSound_onLine = () => {

control_Online.stop(() => {

console.log('Stop Playing...');

});

}

13. Creating return() block, Now here we would design our complete View.

  return (

    <View style={styleSheet.MainContainer}>

      <View style={styleSheet.childView}>

        <Text style={styleSheet.titleText}> Play Sound File From Local Resource </Text>

        <TouchableOpacity activeOpacity={0.7} style={styleSheet.button} onPress={playSound_Local}>

          <Text style={styleSheet.buttonText}> Play </Text>

        </TouchableOpacity>

        <TouchableOpacity activeOpacity={0.7} style={styleSheet.button} onPress={stopSound_Local}>

          <Text style={styleSheet.buttonText}> Stop </Text>

        </TouchableOpacity>

      </View>

      <View style={styleSheet.divider} />

      <View style={styleSheet.childView}>

        <Text style={styleSheet.titleText}> Play Sound File From Online URL </Text>

        <TouchableOpacity activeOpacity={0.7} style={styleSheet.button} onPress={playSound_onLine}>

          <Text style={styleSheet.buttonText}> Play </Text>

        </TouchableOpacity>

        <TouchableOpacity activeOpacity={0.7} style={styleSheet.button} onPress={stopSound_onLine}>

          <Text style={styleSheet.buttonText}> Stop </Text>

        </TouchableOpacity>

      </View>

    </View>

  );

return (

<Text style={styleSheet.titleText}> Play Sound File From Local Resource </Text>

</TouchableOpacity>

</TouchableOpacity>

</View>

<Text style={styleSheet.titleText}> Play Sound File From Online URL </Text>

</TouchableOpacity>

</TouchableOpacity>

</View>

);

14. Creating Style.

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: (Platform.OS === 'ios') ? 20 : 0,
  },

  titleText: {
    fontSize: 22,
    textAlign: 'center',
    padding: 5,
    fontWeight: 'bold',
    color: 'black'
  },

  button: {
    justifyContent: 'center',
    width: '50%',
    padding: 5,
    backgroundColor: '#00B8D4',
    marginTop: 10
  },

  buttonText: {
    color: '#fff',
    textAlign: 'center',
    fontSize: 21
  },

  childView: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },

  divider: {
    borderWidth: 2,
    width: '100%',
    borderColor: 'red',
    marginTop: 20
  }

});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

backgroundColor: 'white',

paddingTop: (Platform.OS === 'ios') ? 20 : 0,

titleText: {

fontSize: 22,

textAlign: 'center',

padding: 5,

fontWeight: 'bold',

color: 'black'

button: {

justifyContent: 'center',

width: '50%',

padding: 5,

backgroundColor: '#00B8D4',

marginTop: 10

buttonText: {

color: '#fff',

textAlign: 'center',

fontSize: 21

childView: {

flexDirection: 'column',

justifyContent: 'center',

alignItems: 'center',

divider: {

borderWidth: 2,

width: '100%',

borderColor: 'red',

marginTop: 20

}

});

15. Complete Source Code for App.js file :-

import React, { useEffect } from 'react';

import { View, StyleSheet, Platform, TouchableOpacity, Text } from 'react-native';

import Sound from 'react-native-sound';

export default function App() {

  let control_Local, control_Online;

  let localSound = require('./sounds/advertising.mp3');

  let onlineSound = 'https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/advertising.mp3';

  useEffect(() => {
    Sound.setCategory('Playback', true); // true = mixWithOthers
    return () => {
      if (control_Local) control_Local.release();
      if (control_Online) control_Online.release();
    };
  }, []);

  const playSound_Local = () => {

    control_Local = new Sound(localSound, (error, _sound) => {
      if (error) {
        alert('error' + error.message);
        return;
      }
      control_Local.play(() => {
        control_Local.release();
      });
    });

  }

  const playSound_onLine = () => {

    control_Online = new Sound(onlineSound, '', (error, _sound) => {
      if (error) {
        alert('error' + error.message);
        return;
      }
      control_Online.play(() => {
        control_Online.release();
      });
    });

  }

  const stopSound_Local = () => {

    control_Local.stop(() => {
      console.log('Stop Playing...');
    });

  }

  const stopSound_onLine = () => {

    control_Online.stop(() => {
      console.log('Stop Playing...');
    });

  }

  return (

    <View style={styleSheet.MainContainer}>

      <View style={styleSheet.childView}>

        <Text style={styleSheet.titleText}> Play Sound File From Local Resource </Text>

        <TouchableOpacity activeOpacity={0.7} style={styleSheet.button} onPress={playSound_Local}>

          <Text style={styleSheet.buttonText}> Play </Text>

        </TouchableOpacity>

        <TouchableOpacity activeOpacity={0.7} style={styleSheet.button} onPress={stopSound_Local}>

          <Text style={styleSheet.buttonText}> Stop </Text>

        </TouchableOpacity>

      </View>

      <View style={styleSheet.divider} />

      <View style={styleSheet.childView}>

        <Text style={styleSheet.titleText}> Play Sound File From Online URL </Text>

        <TouchableOpacity activeOpacity={0.7} style={styleSheet.button} onPress={playSound_onLine}>

          <Text style={styleSheet.buttonText}> Play </Text>

        </TouchableOpacity>

        <TouchableOpacity activeOpacity={0.7} style={styleSheet.button} onPress={stopSound_onLine}>

          <Text style={styleSheet.buttonText}> Stop </Text>

        </TouchableOpacity>

      </View>

    </View>

  );
}

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: (Platform.OS === 'ios') ? 20 : 0,
  },

  titleText: {
    fontSize: 22,
    textAlign: 'center',
    padding: 5,
    fontWeight: 'bold',
    color: 'black'
  },

  button: {
    justifyContent: 'center',
    width: '50%',
    padding: 5,
    backgroundColor: '#00B8D4',
    marginTop: 10
  },

  buttonText: {
    color: '#fff',
    textAlign: 'center',
    fontSize: 21
  },

  childView: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },

  divider: {
    borderWidth: 2,
    width: '100%',
    borderColor: 'red',
    marginTop: 20
  }

});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

import React, { useEffect } from 'react';

import { View, StyleSheet, Platform, TouchableOpacity, Text } from 'react-native';

import Sound from 'react-native-sound';

export default function App() {

let control_Local, control_Online;

let localSound = require('./sounds/advertising.mp3');

let onlineSound = 'https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/advertising.mp3';

useEffect(() => {

Sound.setCategory('Playback', true); // true = mixWithOthers

return () => {

if (control_Local) control_Local.release();

if (control_Online) control_Online.release();

};

}, []);

const playSound_Local = () => {

control_Local = new Sound(localSound, (error, _sound) => {

if (error) {

alert('error' + error.message);

return;

}

control_Local.play(() => {

control_Local.release();

});

}

const playSound_onLine = () => {

control_Online = new Sound(onlineSound, '', (error, _sound) => {

if (error) {

alert('error' + error.message);

return;

}

control_Online.play(() => {

control_Online.release();

});

}

const stopSound_Local = () => {

control_Local.stop(() => {

console.log('Stop Playing...');

});

}

const stopSound_onLine = () => {

control_Online.stop(() => {

console.log('Stop Playing...');

});

}

return (

<Text style={styleSheet.titleText}> Play Sound File From Local Resource </Text>

</TouchableOpacity>

</TouchableOpacity>

</View>

<Text style={styleSheet.titleText}> Play Sound File From Online URL </Text>

</TouchableOpacity>

</TouchableOpacity>

</View>

);

}

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

backgroundColor: 'white',

paddingTop: (Platform.OS === 'ios') ? 20 : 0,

titleText: {

fontSize: 22,

textAlign: 'center',

padding: 5,

fontWeight: 'bold',

color: 'black'

button: {

justifyContent: 'center',

width: '50%',

padding: 5,

backgroundColor: '#00B8D4',

marginTop: 10

buttonText: {

color: '#fff',

textAlign: 'center',

fontSize: 21

childView: {

flexDirection: 'column',

justifyContent: 'center',

alignItems: 'center',

divider: {

borderWidth: 2,

width: '100%',

borderColor: 'red',

marginTop: 20

}

});

Screenshot :-

Example of React Native Sound NPM Package | Play Sound Files

Contents in this project Example of React Native Sound NPM Package :-

Also Read :

Leave a Reply Cancel reply

Search Here