¿Cómo crear el componente de controles de la interfaz de usuario del reproductor de música en ReactJS?

un reproductor de música basicMaterial UI para React tiene este componente disponible para nosotros, y es muy fácil de integrar. Podemos crearlo en ReactJS usando el siguiente enfoque.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando.

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale los módulos material-ui usando el siguiente comando.

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

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

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>
  );
}

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Referencia: https://material-ui.com/components/cards/#ui-controls

Publicación traducida automáticamente

Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *