Create a Music Player using React-Native

React Native is a powerful framework that allows you to build mobile applications using JavaScript and React. In this tutorial, we are going to build a Music Player using React-Native. Here we will load the music files stored in our device and then use the play and pause buttons to control the music. We can also see the progress of the music played in duration.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Prerequisites & Technologies Used:

Approach to create Music Player App

In this app, we will have a single page or screen.
At the start of app, using useEffect hook, we will call a function to load the music files.
Then we will save the device music file URIs and File names in a array.
In the component, array will be mapped and displayed in a column with file names.
On the left of each tile, there will be play/pause button. On clicking it, the file will be loaded.
After loading, another useEffect will fire on change of sound variable. It will store the progress of duration of music played. We will display the progress.
After completion of music, sound will be unloaded.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users:

For the Android Emulator, press " a" as mentioned in the image below.
For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.

For iOS users, simply scan the QR code using the Camera app .

If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Update Dependencies

The updated dependencies in package.json file will look like:

"dependencies": {
     "expo": "53.0.13",                     
     "expo-status-bar": "~2.2.3",           
     "react": "18.2.0",                    
     "react-native": "0.79.0",               
     "expo-media-library": "~17.1.7",        
     "expo-av": "~15.1.6",             
     "@expo/vector-icons": "^14.1.0"
},

Step 4: Start Coding

Example: In this example we are following the above-explained approach.

App.js

//App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import * as MediaLibrary from 'expo-media-library';
import { useEffect, useState } from 'react';
import { Audio } from 'expo-av';
import Ionicons from '@expo/vector-icons/Ionicons';

export default function App() {
    const [musicFiles, setMusicFiles] = useState([])
    const [playing, setPlaying] = useState(-1)
    const [sound, setSound] = useState(null);
    const [progressDuration, setProgressDuration] = useState(0)
    const fetchMusicFiles = async () => {
        const permission = await MediaLibrary.requestPermissionsAsync(

        );
        const media = await MediaLibrary.getAssetsAsync({
            mediaType: MediaLibrary.MediaType.audio,
        });
        setMusicFiles(media.assets)
    }
    const playMusic = async (fileUri) => {
        const { sound } = await Audio.Sound.createAsync({
            uri: fileUri,
        });
        setSound(sound);
        await sound.playAsync();
    }

    const pauseMusic = async () => {
        await sound.pauseAsync();
    }
    useEffect(() => {
        if (!sound) {
            return;
        }
        sound.setOnPlaybackStatusUpdate(
            async (status) => {
                if (status.didJustFinish) {
                    setPlaying(-1)
                    await sound.unloadAsync();
                    console.log("finished")
                    setSound(null);
                }
                else {
                    setProgressDuration(status.positionMillis / 1000)
                }
            }
        );
    }, [sound])
    useEffect(() => {
        fetchMusicFiles()
    }
        , [])
    return (
        <View style={styles.container}>
            <StatusBar style="auto" />
            <Text style={styles.heading}>
                Welcome to GeeksforGeeks
            </Text>
            <View style={styles.list}>

                {musicFiles.map((file, index) => {

                    return (
                        <View key={index}>

                            <TouchableOpacity onPress={
                                playing !== index ?
                                    () => {
                                        playMusic(file.uri)
                                        setPlaying(index)
                                    } :
                                    () => {
                                        pauseMusic()
                                        setPlaying(-1)
                                    }
                            } style={styles.playButton}>
                                <View style={{
                                    flexDirection: "row",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                }}>
                                    <Ionicons
                                        name={playing !== index ?
                                            "play" :
                                            "pause"}
                                        size={30}
                                        color="white" >
                                        <Text
                                            style={styles.fileName}>
                                            {file.filename}
                                        </Text>


                                    </Ionicons>
                                </View>
                                {/* progress duration if index == currentIndex*/}
                                <View style={styles.row}>

                                    {playing === index ?
                                        <Text style={styles.fileName}>
                                            {progressDuration} / {file.duration}
                                        </Text> :
                                        <></>
                                    }
                                </View>
                            </TouchableOpacity>
                        </View>
                    )
                })}
            </View>
        </View>
    );
}


const styles = StyleSheet.create({
    row: {
        flexDirection: "row",
        justifyContent: "space-evenly",
    },
    container: {
        backgroundColor: "#fff",
        height: "100%",
        marginTop: 50,
    },
    heading: {
        color: "green",
        fontSize: 30,
        textAlign: "center",
        fontWeight: "bold",
    },
    list: {
        marginTop: 20,
        flex: 1,
        flexDirection: "column",
    },
    fileName: {
        fontSize: 18,
        color: "white",
        fontWeight: 'bold',
    },
    playButton: {
        backgroundColor: 'gray',
        borderRadius: 50,
        padding: 10,
        margin: 10,
    },
});

Output:

Note: JavaScript-based iframe resizing works only when the iframe content is from the same origin (same domain, protocol, and port). If the iframe loads an external website, the browser will block access to contentWindow.document for security reasons, and resizing via JavaScript will not work.