How to play music using React Native Application (IOS and Android)

Hello Geeks..!!

As a programmer, we love different types of music and we love to listen to music while coding our project. But sometimes we wonder, how to make music applications using mobile app developing platforms. Some of you might use flutter while others use react native. Both are native platforms and good for making mobile applications. In this project, we are going to build a music application using react native expo. We will see how to play music using react-native. And it will work on both ios and android. So, Grab your seat take a cup of coffee, and let’s begin the hack.

Photo by Austin Distel on Unsplash

Set-up and Installation

1. Make a directory and open the terminal in that directory.
2. Execute the command: expo init Music
3. Select the first and blank template and let the downloads complete.
4. Navigate to the directory “Music”
5. Install one library using the command: npm install expo-av

And we are done. After the execution of these 5 steps, you will see something like this

Now, Open this project in your favorite text editor and open App.js.
First, import all the required library and its component

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity} from 'react-native';
import { Audio } from 'expo-av';

We are using react hooks. So, inside the App function update the following code.

const [sound, setSound] = React.useState();async function playSound() {
console.log('Loading Music');
const { sound } = await Audio.Sound.createAsync(
require('./assets/Eminem.mp3') // update the music
);
setSound(sound);
console.log('Playing Music');
await sound.playAsync();
}

In the playSound() function first, we load the music asynchronously as it is stored in internal memory, in the assets folder. Insert one music there and update the code accordingly. While loading the music, when you look at the terminal or command prompt window it will show “loading music”, the same goes for playing music too. Now add the following code below the playSound() function.

React.useEffect(() => {
return sound
? () => {
console.log('Unloading Sound');
sound.unloadAsync(); }
: undefined;
}, [sound]);
return (
<View style={styles.container}>
<TouchableOpacity>
<Text onPress={playSound} style={{fontSize:25}} >Eminem- Lose Yourself</Text>
</TouchableOpacity>
</View>
);

When we use the class-based function, we use componentDidMount() and further unmount it. But when we use react hook’s useEffect it runs both after the first render and after every update.
Add the styling accordingly. I just want my content to show in the middle that’s why I added this.

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
padding: 10,
},
});

The whole App.js code will look like this.

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity} from 'react-native';
import { Audio } from 'expo-av';
export default function App() {
const [sound, setSound] = React.useState();
async function playSound() {
console.log('Loading Sound');
const { sound } = await Audio.Sound.createAsync(
require('./assets/Eminem.mp3') // update the music
);
setSound(sound);
console.log('Playing Sound');
await sound.playAsync(); }
React.useEffect(() => {
return sound
? () => {
console.log('Unloading Sound');
sound.unloadAsync(); }
: undefined;
}, [sound]);
return (
<View style={styles.container}>
<TouchableOpacity>
<Text onPress={playSound} style={{fontSize:25}}>
Eminem- Lose Yourself
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
padding: 10,
},
});

Now Open the terminal and run the server using the command: npm start
Scan the QR code and Open this project’s build-in Expo app. You will see something like this.

Click on the “Eminem- Lose Yourself” and listen to the music. It’s cool, Right?

Thank you.

Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me (freelance.rohit7@gmail.com)

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Build Youtube in React 11: creating a video player component

Share and Embed Projects

How to virus scan an EXE file in Javascript

Javascript Events!

Beyond the Basics: Vue.js for Large-scale Web Applications (Part 3)

Constructors and Garbage collection

How I Solved A Cast Error Bug In ExpressJS

https://dashboard.flagnetwork.finance/airdrop?claimRef=0xE394A90B085CDC1b71EecA876C627491976879Dd

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rohit Kumar Thakur

Rohit Kumar Thakur

ninza7.me

More from Medium

Directly upload Image(s) and files to server from mobile — ReactNative

What is React Native?

How to sign your React Native app for android

Remote Push notifications with react native on Android