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=
/>
<audio className= "audio-element" >
<source src=
</source>
</audio>
</Card>
</div>
);
}
|
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...