Glassy Music Player Codepen

Procedure

Step 1 - HTML Structure:
Declare the document type and set the language to English. Include metadata in the head, such as character set, viewport settings, and page title. Import Google Fonts ('Belanosima' and 'Rubik+Vinyl'). Create a body with a background image and 'Belanosima' font..

Step 2 - Music Player Container (div class="darksoul-music"):
Style a container for the music player with dimensions, background, and a glassy effect. Use flexbox for proper alignment and apply keyframe animations for a subtle movement.

Step 3 - Media Player Section (div class="music-mediaplayer"):
Include an audio element with the source set to your music file. Display the song title, an input range slider, and control icons.

Step 4 - Range Slider Styling (input type="range"):
Style the range slider with a custom appearance. Add a cubic-bezier animation for the slider thumb.

Step 5 - Media Player Icons (div class="media-player-icons"):
Use flexbox to align play, pause, backward, and forward icons. Apply styles, including a hover effect for better visibility.

Step 6 - Music Banner (div class="music-banner"):
Create a banner with a semi-transparent background, rounded border, and shadow. Insert an image for the album cover.

Step 7 - JavaScript Script:
Implement JavaScript functions to play/pause audio. Set an interval to simulate the range slider movement.

Step 8 - Responsive Design (@media):
Adjust the music player's dimensions and styles for screens with a width of 500px or less.

Html

<!DOCTYPE html>
    <html lang="en">
    <head>
         /* Internal styles goes here.. */
    </head>
    <body>
      <div class="darksoul-music">
          <div class="music-mediaplayer">
  
              <audio src="https://darksoul-codepen.github.io/Justin-Bieber-Company.mp3" type="audio/mp3" autoplay></audio>
              <h4>🎵Justin Bieber - Company</h4>
             
              <input type="range" min="0" max="64" value="0" class="darksoul-range" id="slider" smooth=yes/>
  
              <div class="media-player-icons">
                  <img class="backward" width="23" height="23" src="https://img.icons8.com/external-creatype-glyph-colourcreatype/64/7950F2/external-skip-web-application-v2-creatype-glyph-colourcreatype.png" alt="external-skip-web-application-v2-creatype-glyph-colourcreatype"/>
                  <img class="darksoul-playicon" id="play" width="28" height="28" src="https://img.icons8.com/sf-black-filled/64/7950F2/play.png" alt="play" onclick="{play()}"/>
                  <img class="darksoul-pauseicon" id="pause" width="28" height="28" src="https://img.icons8.com/external-solid-kawalan-studio/24/7950F2/external-pause-user-interface-solid-kawalan-studio.png" alt="external-pause-user-interface-solid-kawalan-studio" alt="pause" onclick="{play()}"/>
                  <img class="forward" width="28" height="28" src="https://img.icons8.com/external-creatype-glyph-colourcreatype/64/7950F2/external-forward-essential-ui-v3-creatype-glyph-colourcreatype.png" alt="external-forward-essential-ui-v3-creatype-glyph-colourcreatype"/>    
              </div>
  
           </div>
          <div class="music-banner">
              <img src="https://darksoul-codepen.github.io/artworks-000156861583-kdtytg-t500x500.jpg" />
          </div>
      </div>
      <p class="disclaimer">Designed & Created by <a href="https://darksoul-codepen.github.io/" target="_blank">DarkSoul</a> | Icons by <a href="https://icons8.com/" target="_blank">Icons8</a></p>
  
        /* Script goes here.. */
    </body>
    </html>

Css

@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Rubik+Vinyl&display=swap');
   
  body
  {
      margin: 0;
      height: 100vh;
      width: 100%;
      display: flex;
      background-image: url("https://darksoul-codepen.github.io/DarkSoul.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      font-family: 'Belanosima', sans-serif;
      color: #564d93;
  }
  .darksoul-music
  {
      margin: auto;
      width: 300px;
      height: 500px;
      background-color: rgba(255, 255, 255, 0.175);
      box-shadow: 0.5px 0.5px 2px rgba(255, 255, 255, 0.404), -0.5px -0.5px 2px rgba(255, 255, 255, 0.481);
      border-radius: 0px 20px 0px;
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      animation-name: anim;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
     z-index: 600;
  }
  
  .music-mediaplayer
  {
      height: 40%;
      width: 90%;
      margin: auto;
      background-color: rgba(255, 255, 255, 0);
     
      display: flex;
      flex-direction: column;
      z-index: 500;
  }
  .music-mediaplayer h4
  {
      margin: auto;
      font-size: 40px;
  }
  .music-mediaplayer input
  {
      margin: auto;
      width: 100%;
      margin-bottom: 1px;
  }

input[type='range'] 
  {
      -webkit-appearance: none;
      appearance: none; 
      width: 80%;
  
      outline: none;
      border-radius: 15px;
      height: 6px;
      background: #564d931d;
  }

input[type='range']::-webkit-slider-thumb 
  {
      -webkit-appearance: none;
    
      appearance: none; 
      height: 15px;
      width: 15px;
      background-color: #564d93;
      border-radius: 50%;
      border: none;
      
      animation-name: slider;
      animation-duration: 2s;
      animation-fill-mode: forwards;
      animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      animation-iteration-count: infinite;
  }

@keyframes slider 
  {
      0%
      {
          transform: translateX(0px);
      } 
      100%
      {
          transform: translateX(50px);
      }
  }
  .media-player-icons
  {
      display: flex;
      width: 50%;
      height: fit-content;
      margin: auto;
      margin-bottom: 1px;
      z-index: 500;
  }

.music-banner
  {
      height: 50%;
      width: 90%;
      margin: auto;
      background-color: #d1cfde55;
      border-radius: 25px;
      z-index: 600;
  }
  .music-banner img
  {
      width: 100%;
      height: 100%;
      border-radius: 0px 20px 0px;
      box-shadow: 0px 5px 100px #f2f1fa;
      backdrop-filter: blur(100px);
  }
  .darksoul-playicon
  {
      display: none;
      margin: auto;
      margin-bottom: 1px;
      padding: 5px;
  }
  
  .darksoul-pauseicon
  {
      display: flex;
      margin: auto;
      margin-bottom: 1px;
      padding: 5px;
  }
  .darksoul-pauseicon:hover, .darksoul-playicon:hover, .backward:hover, .forward:hover
  {
      background-color: rgba(198, 190, 255, 0.696);
      border-radius: 50%;
      cursor: pointer;
      backdrop-filter: blur(1000px);
  }
  .backward
  {
      margin: auto;
      padding: 5px;
      margin-bottom: 4px;
  }
  .forward
  {
      margin: auto;
      padding: 5px;
      margin-bottom: 1px;
  }

.disclaimer
  {
      position: absolute;
      bottom: 0px; 
      left: 0; 
      margin-left: auto; 
      right: 0; 
      margin-right: auto; 
      width: fit-content;
      color: white;
      text-align: center;
  }
  .disclaimer a
  {
      text-decoration: none;
      color: #584f95;
  }
  .disclaimer a:hover
  {
      font-weight: bolder;
  }
  ::selection
  {
      background-color: #453b7b;
      color: white;
  }
  @media only screen and (max-width: 500px) 
  {
      .darksoul-music
  {
      margin: auto;
      width: 90%;
      height: 70%;
      background-color: rgba(255, 255, 255, 0.379);
      box-shadow: 0.5px 0.5px 2px rgb(255, 255, 255), -0.5px -0.5px 2px rgb(255, 255, 255);
      border-radius: 0px 20px 0px;
      backdrop-filter: blur(5px);
      display: flex;
      flex-direction: column;
      animation-name: anim;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
     
  }
    
  }
  @keyframes anim 
  {
      0%
      {
          transform: translateY(0px) translateX(0px);
      }
      50%
      {
          transform: translateY(5px) translateX(5px);
      }
      100%
      {
          transform: translateY(0px) translateX(0px);
      }
  }

CodePen

Procedure

Html

Css

Js

Output Screenshot