Code : Music Player UI [HTLM | CSS | JS]

Step 1: Create Index.html File.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player UI</title>

    <!-- Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" />

    <!-- Fonts -->
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500&display=swap"
        rel="stylesheet">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>

</head>

<body>

    <audio id="player" loop>
        <source id="audio-source" src="https://thebloodcoders.github.io/music-player-ui/Lily.mp3" type="audio/mpeg">
    </audio>

    <div class="container">

        <div class="buttons">
            <div class="like">
                <i class="ri-heart-3-fill"></i>
            </div>
            <div class="download">
                <i class="ri-download-2-line"></i>
            </div>
        </div>

        <div class="flex-item-1">
            <div class="cover"></div>
            <div class="bg"></div>
        </div>

        <div class="flex-item-2">

            <div class="info-holder">
                <div class="song">Lily</div>
                <div class="artist">Alan Walker</div>

                <div class="progress">
                    <div class="duration">01:28/03:55</div>
                    <div class="bar"></div>
                </div>

                <div class="controls-holder">
                    <div class="controls">
                        <i class="ri-rewind-fill"></i>
                        <i class="ri-play-circle-line pause"></i>
                        <i class="ri-speed-fill"></i>
                    </div>
                </div>

            </div>

        </div>

    </div>

</body>
</html> 



Step 2: Create Style.css File.
:root {
  --accent#ff83c2;
  --icons#f97686;
  --bg#feddee;
}

* {
  margin0;
  padding0;
  -webkit-box-sizingborder-box;
          box-sizingborder-box;
}

body {
  background-colorvar(--bg);
  font-family"Roboto"sans-serif;
  height100vh;
  display: -ms-grid;
  displaygrid;
  place-itemscenter;
}

.container {
  positionrelative;
  background-color#fff;
  height160px;
  width85vw;
  max-width400px;
  -webkit-box-shadow0 4px 10px #f9768542;
          box-shadow0 4px 10px #f9768542;
  border-radius5px;
  display: -webkit-box;
  display: -ms-flexbox;
  displayflex;
  -webkit-box-aligncenter;
      -ms-flex-aligncenter;
          align-itemscenter;
  padding-right1rem;
}

.bg {
  positionabsolute;
  width100px;
  height120%;
  background-colorvar(--accent);
  left-20px;
  -webkit-transformrotate(-10deg);
          transformrotate(-10deg);
  z-index-1;
}

.flex-item-1 {
  positionrelative;
  z-index3;
  height100%;
  -webkit-box-flex0;
      -ms-flex0 0 40%;
          flex0 0 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  displayflex;
  padding0 1rem;
  overflowhidden;
  border-radius5px;
  -webkit-box-aligncenter;
      -ms-flex-aligncenter;
          align-itemscenter;
  min-width150px;
}

.buttons {
  colorvar(--icons);
  positionabsolute;
  top1.2rem;
  left-19px;
  right0;
  z-index4;
  display: -webkit-box;
  display: -ms-flexbox;
  displayflex;
  -webkit-box-orientvertical;
  -webkit-box-directionnormal;
      -ms-flex-directioncolumn;
          flex-directioncolumn;
}

.download i.like i {
  background#fff;
  padding0.5rem;
  margin-top0.5rem;
  displayinline-block;
  font-size1.2em;
  border-top-left-radius5px;
  border-bottom-left-radius5px;
}

.cover {
  positionrelative;
  width120px;
  height120px;
  backgroundred;
  background-imageurl("https://thebloodcoders.github.io/music-player-ui/Lily.jpg?raw=true");
  background-sizecover;
  background-positioncenter;
  border-radius5px;
  -webkit-box-shadow3px 3px 6px rgba(0000.2);
          box-shadow3px 3px 6px rgba(0000.2);
}

.flex-item-2 {
  positionrelative;
  -webkit-box-flex1;
      -ms-flex1;
          flex1;
}

.info-holder {
  margin-top1.5rem;
  width100%;
}

.song {
  font-size1.2em;
}

.artist {
  color#3b3b3b;
  font-size0.7em;
}

.progress {
  positionrelative;
  height1.5rem;
}

.duration {
  positionabsolute;
  top0;
  right0;
  font-size0.6em;
  colorvar(--accent);
}

.bar {
  positionabsolute;
  bottom0;
  left0;
  right0;
  background-colorvar(--bg);
  height2px;
}

.bar::after {
  content"";
  positionabsolute;
  background-colorvar(--accent);
  height100%;
  width30%;
}

.bar::before {
  positionabsolute;
  content"";
  height8px;
  width8px;
  background-colorvar(--accent);
  border-radius50%;
  z-index1;
  top-3px;
  left28%;
}

.controls-holder {
  margin-top1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  displayflex;
  -webkit-box-packcenter;
      -ms-flex-packcenter;
          justify-contentcenter;
}

.controls {
  colorvar(--accent);
  display: -webkit-box;
  display: -ms-flexbox;
  displayflex;
  -webkit-box-aligncenter;
      -ms-flex-aligncenter;
          align-itemscenter;
}

.pause {
  font-size1.8em;
  padding0 1rem;
}



Step 3: Create Script.js File.
let isPlaying = false;

window.addEventListener('DOMContentLoaded', () => {

const btnOk = document.querySelector('.the-blood-coders__ok-btn');

    btnOk.addEventListener('click', (e=> {
        e.target.closest('.the-blood-coders__backdrop').remove();
    });

    const player = document
        .getElementById('player');

    const playBtn = document
        .querySelector('.pause');

    playBtn.addEventListener('click', () => {

        if (!isPlaying) {
            playBtn.classList.remove('ri-play-circle-line');
            playBtn.classList.add('ri-pause-circle-line');
            player.play();
            isPlaying = true;
        } else {
            playBtn.classList.remove('ri-pause-circle-line');
            playBtn.classList.add('ri-play-circle-line');
            player.pause();
            isPlaying = false;
        }

    });
});



Step 4: Result.

music player ui


If you found this helpful PLEASE SHARE IT.  You may also find these posts helpful!
 
 

To that end, I am only an email away.  Contact me with any questions.

Happy coding,

By Aakaanksha 💕 [TheBloodCoders] ( SoloLearn User )


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ If any Photos/Videos/Article/Blog/Content has an issue with this upload, please contact us and we will remove it immediately. Contact E-Mail :lawtantra@gmail.com
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Post a Comment

0 Comments