How to create Music Player UI Controls Component in ReactJS?

Last Updated : 04 Dec, 2023

Crafting a basic music player UI in ReactJS becomes a straightforward endeavor with a simple and easily implementable logic. Leveraging Material UI for React further simplifies the process, offering an available component that seamlessly integrates into the project.

Prerequisites:

Approach:

Functional Component Setup:
- A React functional component named App is created to encapsulate the music player UI.
- The component imports necessary Material-UI components such as CardContent, SkipPreviousIcon, SkipNextIcon, useTheme, Typography, IconButton, CardMedia, PlayArrowIcon, and Card.
Audio Playback Functionality:
- The playAudio function is defined to play the audio element when the play button (PlayArrowIcon) is clicked.
- The function utilizes document.getElementsByClassName to access the audio element with the class “audio-element” and triggers the play() method.
Styling and Layout:
- The UI layout is structured using Material-UI components, including Card for the overall container, CardContent for text content, and CardMedia for the image.
- Inline styles are applied for width, display, background color, and box shadow to enhance the visual presentation of the card.
UI Content and Interactivity:
- Text content such as the music title and singer’s name is displayed using Typography components within CardContent.
- Playback control buttons (SkipPreviousIcon, PlayArrowIcon, and SkipNextIcon) are incorporated using IconButton components.
- The audio source is linked to an MP3 file, and the image source is set accordingly.

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/core
npm install @material-ui/icons

Project Structure:

Project Structure

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

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

Javascript

import React from "react";
import CardContent from "@material-ui/core/CardContent";
import SkipPreviousIcon from "@material-ui/icons/SkipPrevious";
import SkipNextIcon from "@material-ui/icons/SkipNext";
import { useTheme } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import CardMedia from "@material-ui/core/CardMedia";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import Card from "@material-ui/core/Card";
 
export default function App() {
    const playAudio = () => {
        const audioEl = document.getElementsByClassName("audio-element")[0];
        audioEl.play();
    };
 
    return (
        <div style={{}}>
            <h4>How to create Music Player UI in ReactJS?</h4>
            <Card
                style={{
                    width: 400,
                    display: "flex",
                    backgroundColor: "whitesmoke",
                    boxShadow: "4px 4px 4px gray",
                }}
            >
                <div
                    style={{
                        display: "flex",
                        flexDirection: "column",
                    }}
                >
                    <CardContent
                        style={{
                            flex: "1 0 auto",
                        }}
                    >
                        <Typography component="h5" variant="h5">
                            Music Title
                        </Typography>
                        <Typography variant="subtitle1" color="textSecondary">
                            Singer Name
                        </Typography>
                    </CardContent>
                    <div
                        style={{
                            display: "flex",
                            alignItems: "center",
                            paddingLeft: 1,
                            paddingBottom: 1,
                        }}
                    >
                        <IconButton aria-label="previous">
                            {useTheme().direction !== "rtl" ? (
                                <SkipPreviousIcon />
                            ) : (
                                <SkipNextIcon />
                            )}
                        </IconButton>
                        <IconButton aria-label="play/pause">
                            <PlayArrowIcon
                                style={{
                                    height: 38,
                                    width: 38,
                                }}
                                onClick={playAudio}
                            />
                        </IconButton>
                        <IconButton aria-label="next">
                            {useTheme().direction !== "rtl" ? (
                                <SkipNextIcon />
                            ) : (
                                <SkipPreviousIcon />
                            )}
                        </IconButton>
                    </div>
                </div>
                <CardMedia
                    style={{
                        width: 151,
                    }}
                    image=
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg"
                />
                <audio className="audio-element">
                    <source src=
"https://assets.coderrocketfuel.com/pomodoro-times-up.mp3">
                    </source>
                </audio>
            </Card>
        </div>
    );
}