How to create Music Player UI Controls Component in ReactJS?
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
, andCard
.
- A React functional component named
- 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 theplay()
method.
- The
- Styling and Layout:
- The UI layout is structured using Material-UI components, including
Card
for the overall container,CardContent
for text content, andCardMedia
for the image. - Inline styles are applied for width, display, background color, and box shadow to enhance the visual presentation of the card.
- The UI layout is structured using Material-UI components, including
- UI Content and Interactivity:
- Text content such as the music title and singer’s name is displayed using
Typography
components withinCardContent
. - Playback control buttons (
SkipPreviousIcon
,PlayArrowIcon
, andSkipNextIcon
) are incorporated usingIconButton
components. - The audio source is linked to an MP3 file, and the image source is set accordingly.
- Text content such as the music title and singer’s name is displayed using
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:
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.w3wiki.net/static/media/Group%20210.08204759.svg" /> <audio className= "audio-element" > <source src= "https://assets.coderrocketfuel.com/pomodoro-times-up.mp3" > </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
Contact Us