credit me

im gonna make this nice & simple!!! you got 2 options, one with a bunch of CSS thats most like the one on my index, then the simple one with more creative liberty thats easy as hell to style. u pick. idc what the hell you do with either as long as i'm credited! (example: credits page, on index or page its used on, a comment in the code) based off this code you can also tinker with if you want

<div class="player">
          <div class="tophalf">
              <div class="track-art"></div>
              <div class="details">
          <div class="topdetails">
                    <div class="track-name">Track Name</div>
                    <div class="track-artist">Track Artist</div>
                    <div class="now-playing">PLAYING x OF y</div>
          </div>
                  <div class="buttons">
                      <div class="prev-track" onclick="prevTrack()"><i class="fa fa-step-backward fa-2x"></i></div>
                      <div class="playpause-track" onclick="playpauseTrack()"><i class="fa fa-play-circle fa-5x"></i></div>
                      <div class="next-track" onclick="nextTrack()"><i class="fa fa-step-forward fa-2x"></i></div>
                    </div>
                </div>
          </div>
          <div class="bottomhalf">
              
              <div class="slider_container">
                  <div class="current-time">00:00</div>
                  <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
                  <div class="total-duration">00:00</div>
                </div>
                
                <div class="slider_container">
                  <i class="fa fa-volume-down"></i>
                  <input type="range" min="1" max="100" value="99" class="volume_slider" onchange="setVolume()">
                  <i class="fa fa-volume-up"></i>
                </div>
          </div>
            </div>

<style>
              /*delete this if you wanna get rid of the font*/
            *{
                    font-family: inter;
              }
                  .player {
                height: 11rem;
                width: 15rem;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                background: url(https://i.pinimg.com/736x/d7/be/45/d7be45e85afffe5b51bf0244090ed360.jpg);
                padding: 7px;
                border: 3px solid rgb(255, 255, 255);
                outline: 3px solid rgb(172, 214, 238);
                border-radius: 5px;
                background-size: contain;
                box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgba(66, 66, 66, 0.226), inset 0px 13px 6px -10px #ffffffab, inset 0px -13px 6px -10px rgba(66, 66, 66, 0.185), rgba(0, 0, 0, 0.418) 0 0 5px 2px;
              }
              
              .details {
              width: 7rem;
              height: 8.1rem;
              text-align: center;
              display: flex;
              flex-direction: column;
              flex-wrap: nowrap;
              align-items: center;
              }
              
              .track-art {
                margin: 0px;
                height: 7.5rem;
                width: 8rem;
                background-image: url("https://images.pexels.com/photos/262034/pexels-photo-262034.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
                background-size: cover;
                border-radius: 5%;
                float: left;
                transition: ease 0.3s;
                box-shadow: white 0 0 0 2px, #00000059 0 0 7px 0px;
              }
              
              .track-art:hover{
                  filter: saturate(1.5);
              }
          
              .now-playing {
                font-size: 0.8rem;
                color: #5c9cd8;
              }
              
              .track-name {
                font-size: 1.2rem;
                filter: drop-shadow(1px 1px 2px #5c9cd8);
                color:#ffffff;
              }
              
              .track-artist {
                font-size: 1.05rem;
                color: #ffffff;
                text-shadow: -1px 1px #a3d3ff, 1px 1px #a3d3ff, 1px 1px #a3d3ff, 1px -1px #a3d3ff;
                font-style: italic;
                word-break: break-all;
              }
              
              .buttons {
                display: flex;
                flex-direction: row;
                align-items: center;
                color: white;
              filter: drop-shadow(1px 1px 2px rgba(119, 153, 216, 0.356));
              gap: 5px;
              }
              
              .playpause-track, .prev-track, .next-track {
                transition: ease 0.2s;
              }
              
              .playpause-track:hover, .prev-track:hover, .next-track:hover {
                opacity: 0.9;
              }
              
              .slider_container {
                width: 105%;
                max-width: 400px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 1.7rem;
                color: #6da2c5;
              }
              
              /* Modify the appearance of the slider */
              .seek_slider, .volume_slider {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                height: 5px;
                background: rgb(117, 171, 202);
                opacity: 0.7;
                -webkit-transition: .2s;
                transition: opacity .2s;
              }
              
              /* Modify the appearance of the slider thumb */
              .seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                width: 15px;
                height: 15px;
                background: rgb(255, 255, 255);
                cursor: pointer;
                border-radius: 50%;
                box-shadow: inset 7px 0 7px -7px #8cccf7, inset -7px 0 7px -7px #8cccf7, inset 0 -7px 7px -7px #8cccf7;
              }
              
              .seek_slider:hover, .volume_slider:hover {
                opacity: 1.0;
              }
              
              .seek_slider {
                width: 60%;
              }
              
              .volume_slider {
                width: 74%;
              }
              
              .current-time, .total-duration {
                padding: 10px;
              }
              
              i.fa-volume-down, i.fa-volume-up {
                padding: 10px;
              }
              
              i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward {
                cursor: pointer;
              }
              .fa-5x {
              font-size: 1.9em;
          }
          .fa-2x{
             font-size: 1.8em;
          }
          .tophalf{
          width: 100%;
          height: 8rem;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          }
          .bottomhalf{
          width: 100%;
          height: 3.5rem;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-items: center;
          }
          .topdetails{
          width: 100%;
          height: 5.8rem;
          text-align: center;
          padding-left: 3px;
          }
            </style>
            <script>
              let now_playing = document.querySelector(".now-playing");
          let track_art = document.querySelector(".track-art");
          let track_name = document.querySelector(".track-name");
          let track_artist = document.querySelector(".track-artist");
          
          let playpause_btn = document.querySelector(".playpause-track");
          let next_btn = document.querySelector(".next-track");
          let prev_btn = document.querySelector(".prev-track");
          
          let seek_slider = document.querySelector(".seek_slider");
          let volume_slider = document.querySelector(".volume_slider");
          let curr_time = document.querySelector(".current-time");
          let total_duration = document.querySelector(".total-duration");
          
          let track_index = 0;
          let isPlaying = false;
          let updateTimer;
          
          // Create new audio element
          let curr_track = document.createElement('audio');
          
          // Define the tracks that have to be played
          let track_list = [
            {
              name: "Twilight",
              artist: "Bôa",
              image: "https://f4.bcbits.com/img/a0961477916_10.jpg",
              path: "https://file.garden/ZRW6VPKULjLI59VM/Twilight.mp3"
            },
            {
              name: "Attracted to You",
              artist: "pinkpantheress",
              image: "https://i1.sndcdn.com/artworks-xDSVN4sLmgYy-0-t500x500.jpg",
              path: "https://file.garden/ZRW6VPKULjLI59VM/Attracted%20to%20You.mp3"
            },
            {
              name: "88彡",
              artist: "Marasy, Kemu",
              image: "https://goooby.neocities.org/enough%20omg/883F_Game_Cover.png",
              path: "https://file.garden/ZRW6VPKULjLI59VM/88%E5%BD%A1%20%20WonderlandsShowtime%20%23Proseka.mp3",
            },
          ];
          
          
          
          function loadTrack(track_index) {
            clearInterval(updateTimer);
            resetValues();
            curr_track.src = track_list[track_index].path;
            curr_track.load();
          
            track_art.style.backgroundImage = "url(" + track_list[track_index].image + ")";
            track_name.textContent = track_list[track_index].name;
            track_artist.textContent = track_list[track_index].artist;
            now_playing.textContent = "PLAYING " + (track_index + 1) + " OF " + track_list.length;
          
            updateTimer = setInterval(seekUpdate, 1000);
            curr_track.addEventListener("ended", nextTrack);
          }
          
          function resetValues() {
            curr_time.textContent = "00:00";
            total_duration.textContent = "00:00";
            seek_slider.value = 0;
          }
          
          // Load the first track in the tracklist
          loadTrack(track_index);
          
          function playpauseTrack() {
            if (!isPlaying) playTrack();
            else pauseTrack();
          }
          
          function playTrack() {
            curr_track.play();
            isPlaying = true;
            playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
          }
          
          function pauseTrack() {
            curr_track.pause();
            isPlaying = false;
            playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';;
          }
          
          function nextTrack() {
            if (track_index < track_list.length - 1)
              track_index += 1;
            else track_index = 0;
            loadTrack(track_index);
            playTrack();
          }
          
          function prevTrack() {
            if (track_index > 0)
              track_index -= 1;
            else track_index = track_list.length;
            loadTrack(track_index);
            playTrack();
          }
          
          function seekTo() {
            let seekto = curr_track.duration * (seek_slider.value / 100);
            curr_track.currentTime = seekto;
          }
          
          function setVolume() {
            curr_track.volume = volume_slider.value / 100;
          }
          
          function seekUpdate() {
            let seekPosition = 0;
          
            if (!isNaN(curr_track.duration)) {
              seekPosition = curr_track.currentTime * (100 / curr_track.duration);
          
              seek_slider.value = seekPosition;
          
              let currentMinutes = Math.floor(curr_track.currentTime / 60);
              let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
              let durationMinutes = Math.floor(curr_track.duration / 60);
              let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
          
              if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
              if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
              if (currentMinutes < 10) { currentMinutes = "0" + currentMinutes; }
              if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }
          
              curr_time.textContent = currentMinutes + ":" + currentSeconds;
              total_duration.textContent = durationMinutes + ":" + durationSeconds;
            }
          }
          </script>

<div class="player">
          <div class="tophalf">
              <div class="track-art"></div>
              <div class="details">
          <div class="topdetails">
                    <div class="track-name">Track Name</div>
                    <div class="track-artist">Track Artist</div>
                    <div class="now-playing">PLAYING x OF y</div>
          </div>
                  <div class="buttons">
                      <div class="prev-track" onclick="prevTrack()"><i class="fa fa-step-backward fa-2x"></i></div>
                      <div class="playpause-track" onclick="playpauseTrack()"><i class="fa fa-play-circle fa-5x"></i></div>
                      <div class="next-track" onclick="nextTrack()"><i class="fa fa-step-forward fa-2x"></i></div>
                    </div>
                </div>
          </div>
          <div class="bottomhalf">
              
              <div class="slider_container">
                  <div class="current-time">00:00</div>
                  <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
                  <div class="total-duration">00:00</div>
                </div>
                
                <div class="slider_container">
                  <i class="fa fa-volume-down"></i>
                  <input type="range" min="1" max="100" value="99" class="volume_slider" onchange="setVolume()">
                  <i class="fa fa-volume-up"></i>
                </div>
          </div>
            </div>

<style>
          .player {
            margin: 3rem auto;
        height: 11rem;
        width: 14rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        background: url(https://i.pinimg.com/736x/d7/be/45/d7be45e85afffe5b51bf0244090ed360.jpg);
        padding: 7px;
        border: 2px solid #acd6ee;
        border-radius: 5px;
        background-size: contain;
      }
      
      .details {
      width: 7rem;
      height: 8.1rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      }
      
      .track-art {
        margin: 0px;
        height: 7.5rem;
        width: 8rem;
        /* if you see this img you probably messed smth up */
        background-image: url("https://images.pexels.com/photos/262034/pexels-photo-262034.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
        background-size: cover;
        border-radius: 5%;
        float: left;
        transition: ease 0.3s;
      }
  
  /* remove if you want */    
      .track-art:hover{
          filter: saturate(1.5);
      }
  
      .now-playing {
        font-size: 0.8rem;
        color: #5c9cd8;
      }
      
      .track-name {
        font-size: 1.2rem;
        filter: drop-shadow(1px 1px 2px #5c9cd8);
        color:#ffffff;
      }
      
      .track-artist {
        font-size: 1.05rem;
        color: #ffffff;
        text-shadow: -1px 1px #a3d3ff, 1px 1px #a3d3ff, 1px 1px #a3d3ff, 1px -1px #a3d3ff;
        font-style: italic;
        word-break: break-all;
      }
      
      .buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #8CCCF7;
      gap: 5px;
      }
      
      .playpause-track, .prev-track, .next-track {
        transition: ease 0.2s;
      }
      
      .playpause-track:hover, .prev-track:hover, .next-track:hover {
        opacity: 0.9;
      }
      
      .slider_container {
        width: 105%;
        max-width: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1.7rem;
        color: #6da2c5;
      }
      
      /* Modify the appearance of the slider */
      .seek_slider, .volume_slider {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 5px;
        background: rgb(97, 169, 211);
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
      }
      
      /* Modify the appearance of the slider thumb */
      .seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        background: #8cccf7;
        cursor: pointer;
        border-radius: 50%;
      }
      
      .seek_slider:hover, .volume_slider:hover {
        opacity: 1.0;
      }
      
      .seek_slider {
        width: 60%;
      }
      
      .volume_slider {
        width: 74%;
      }
      
      .current-time, .total-duration {
        padding: 10px;
      }
      
      i.fa-volume-down, i.fa-volume-up {
        padding: 10px;
      }
      
      i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward {
        cursor: pointer;
      }
      .fa-5x {
      font-size: 1.9em;
  }
  .fa-2x{
     font-size: 1.8em;
  }
  /* dw about this below */
  .tophalf{
  width: 100%;
  height: 8rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  }
  .bottomhalf{
  width: 100%;
  height: 3.5rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  }
  .topdetails{
  width: 100%;
  height: 5.8rem;
  text-align: center;
  padding-left: 3px;
  }
  </style>
  
  <script>
  // if you want to change the actual songs, go HERE!!!
  let now_playing = document.querySelector(".now-playing");
  let track_art = document.querySelector(".track-art");
  let track_name = document.querySelector(".track-name");
  let track_artist = document.querySelector(".track-artist");
  
  let playpause_btn = document.querySelector(".playpause-track");
  let next_btn = document.querySelector(".next-track");
  let prev_btn = document.querySelector(".prev-track");
  
  let seek_slider = document.querySelector(".seek_slider");
  let volume_slider = document.querySelector(".volume_slider");
  let curr_time = document.querySelector(".current-time");
  let total_duration = document.querySelector(".total-duration");
  
  let track_index = 0;
  let isPlaying = false;
  let updateTimer;
  
  // Create new audio element
  let curr_track = document.createElement('audio');
  
  // Define the tracks that have to be played
  let track_list = [
    {
      name: "Twilight",
      artist: "Bôa",
      image: "https://f4.bcbits.com/img/a0961477916_10.jpg",
      path: "https://file.garden/ZRW6VPKULjLI59VM/Twilight.mp3"
    },
    {
      name: "Attracted to You",
      artist: "pinkpantheress",
      image: "https://i1.sndcdn.com/artworks-xDSVN4sLmgYy-0-t500x500.jpg",
      path: "https://file.garden/ZRW6VPKULjLI59VM/Attracted%20to%20You.mp3"
    },
    {
      name: "88彡",
      artist: "Marasy, Kemu",
      image: "https://goooby.neocities.org/enough%20omg/883F_Game_Cover.png",
      path: "https://file.garden/ZRW6VPKULjLI59VM/88%E5%BD%A1%20%20WonderlandsShowtime%20%23Proseka.mp3",
    },
  ];
  
  
  
  function loadTrack(track_index) {
    clearInterval(updateTimer);
    resetValues();
    curr_track.src = track_list[track_index].path;
    curr_track.load();
  
    track_art.style.backgroundImage = "url(" + track_list[track_index].image + ")";
    track_name.textContent = track_list[track_index].name;
    track_artist.textContent = track_list[track_index].artist;
    now_playing.textContent = "PLAYING " + (track_index + 1) + " OF " + track_list.length;
  
    updateTimer = setInterval(seekUpdate, 1000);
    curr_track.addEventListener("ended", nextTrack);
  }
  
  function resetValues() {
    curr_time.textContent = "00:00";
    total_duration.textContent = "00:00";
    seek_slider.value = 0;
  }
  
  // Load the first track in the tracklist
  loadTrack(track_index);
  
  function playpauseTrack() {
    if (!isPlaying) playTrack();
    else pauseTrack();
  }
  
  function playTrack() {
    curr_track.play();
    isPlaying = true;
    playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
  }
  
  function pauseTrack() {
    curr_track.pause();
    isPlaying = false;
    playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';;
  }
  
  function nextTrack() {
    if (track_index < track_list.length - 1)
      track_index += 1;
    else track_index = 0;
    loadTrack(track_index);
    playTrack();
  }
  
  function prevTrack() {
    if (track_index > 0)
      track_index -= 1;
    else track_index = track_list.length;
    loadTrack(track_index);
    playTrack();
  }
  
  function seekTo() {
    let seekto = curr_track.duration * (seek_slider.value / 100);
    curr_track.currentTime = seekto;
  }
  
  function setVolume() {
    curr_track.volume = volume_slider.value / 100;
  }
  
  function seekUpdate() {
    let seekPosition = 0;
  
    if (!isNaN(curr_track.duration)) {
      seekPosition = curr_track.currentTime * (100 / curr_track.duration);
  
      seek_slider.value = seekPosition;
  
      let currentMinutes = Math.floor(curr_track.currentTime / 60);
      let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
      let durationMinutes = Math.floor(curr_track.duration / 60);
      let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
  
      if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
      if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
      if (currentMinutes < 10) { currentMinutes = "0" + currentMinutes; }
      if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }
  
      curr_time.textContent = currentMinutes + ":" + currentSeconds;
      total_duration.textContent = durationMinutes + ":" + durationSeconds;
    }
  }
  </script>