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
