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.
|
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.
|
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.
|
1 2 3 |
import React, { useEffect } from 'react'; import { View, StyleSheet, Platform, TouchableOpacity, Text } from 'react-native'; |
4. Import Sound from react native sound package.
|
1 |
import Sound from 'react-native-sound'; |
5. Creating our main Export default App.
|
1 2 3 4 5 |
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.
|
1 |
let control_Local, control_Online; |
7. Creating 1 variable named as localSound to hold the local sound file path.
|
1 |
let localSound = require('./sounds/advertising.mp3'); |
8. Creating another variable named as onlineSound to hold online sound URL.
|
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.
|
1 2 3 4 5 6 7 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
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> ); |
14. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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 :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 ( <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 } }); |
Screenshot :-
Also Read :
React Native Integrate Google Maps in Android iOS App Example Tutorial
React Native Custom Common Toast for both Android iOS App Tutorial
Create File Picker in React Native Android iOS Example Tutorial
Create Rounded Circular Progress Chart in React Native
React Native Creating & Calling Function From Same Class Example
