How to create Music Player UI Controls Component in ReactJS? - GeeksforGeeks

16 Sep, 2021
We can create a music-player basic UI in ReactJS using the following logic which is very simple and easy to implement. Material UI for React has this component available for us, and it is very easy to integrate. We can create it in ReactJS using the following approach.
Creating 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: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
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>  );}
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/, you will see the following output.
Reference: https://material-ui.com/components/cards/#ui-controls
sooda367
Material-UI
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript