music player by adilene.net and css by me enjoy !!!!! inspired by the scm player

html + javascript

<div id="musicplayer">
        
        <table class="controls"><script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script>  
            <tr>
                <td>
                    <div class="prev-track" onclick="prevTrack()"><i class="fas fa-backward">◁</i></div>
                </td>
                <td>
                    <div class="playpause-track" onclick="playpauseTrack()" ><i class="fas fa-play">▶</i></div>
                </td>
                <td>
                    <div class="next-track" onclick="nextTrack()"><i class="fas fa-forward">▷</i></div>
                </td>
            </tr>
        </table>
        
 <div>
            <marquee scrollamount="8" class="songtitle"></marquee>
        </div>
        <div class="seeking">
            <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">0:00</div>
        </div>
 <div class="slider_container">
 
      <i class="fa fa-volume-down"></i>
      <input type="range" min="0" max="20"
        value="10" class="volume_slider" onchange="setVolume()">
      <i class="fa fa-volume-up"></i>
    </div>
    
        <audio id="music" src=""></audio> 
    </div>
    
    <script>
        // initiate variables
        let track_name = document.querySelector(".songtitle");
 
        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 curr_time = document.querySelector(".current-time");
        let total_duration = document.querySelector(".total-duration");
 let volume_slider = document.querySelector(".volume_slider");
        let track_index = 0;
        let isPlaying = false;
        let updateTimer;
        
        // create new audio element
        let curr_track = document.getElementById("music");
        
        //
        // DEFINE YOUR SONGS HERE!!!!!
        // MORE THAN FOUR SONGS CAN BE ADDED!!
        // JUST ADD ANOTHER BRACKET WITH NAME AND PATH
        // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES
         let track_list = [
            {
                name:"AI CATCH - GOATBED",
                path:"https://files.catbox.moe/n7hqlt.mp3"
            },
            
            {
                name:"Dramatique? - Kanako Itō",
                path:"https://files.catbox.moe/j8wmyj.mp3"
            },
            
            {
                name:"SLIP ON THE PUMPS - GOATBED",
                path:"https://files.catbox.moe/otswpp.mp3"
            },
            {
                name: "Cosmocall Field - GOATBED",
                path: "https://files.catbox.moe/ku1syj.mp3",
            },
              {
                name: "Dreamon Dreamer - GOATBED",
                path: "https://files.catbox.moe/v6a7ik.mp3",
            },
        ];
        //
        //
        //
        //
        // the default volume of the song feel free to change
          vid = document.getElementById("music");
                              vid.volume = 0.1; 
                              
           function setVolume() {
            // Set the volume according to the
            // percentage of the volume slider set
           
            curr_track.volume = volume_slider.value / 100;
          }
          
                              
        function loadTrack(track_index) {
            clearInterval(updateTimer);
            resetValues();
 
            // load a new track
            curr_track.src = track_list[track_index].path;
            curr_track.load();
            
            // update details of the track
            track_name.textContent = "playing " + (track_index + 1) + " of " + track_list.length + ": " + track_list[track_index].name;
 
            // set an interval of 1000 milliseconds for updating the seek slider
            updateTimer = setInterval(seekUpdate, 1000);
            
            // move to the next track if the current one finishes playing 
            curr_track.addEventListener("ended", nextTrack);
        }
 
        // reset values
        function resetValues() {
            curr_time.textContent = "0:00";
            total_duration.textContent = "0:00";
            seek_slider.value = 0;
        }
 
        // checks if song is playing
        function playpauseTrack() {
            if (!isPlaying) playTrack();
            else pauseTrack();
        }
 
        // plays track when play button is pressed
        function playTrack() {
            curr_track.play();
            isPlaying = true;
            
            // replace icon with the pause icon
            playpause_btn.innerHTML = '<i class="fas fa-pause">❚❚</i>';
        }
 
        // pauses track when pause button is pressed
        function pauseTrack() {
            curr_track.pause();
            isPlaying = false;
            
            // replace icon with the play icon
            playpause_btn.innerHTML = '<i class="fas fa-play">▶</i>';
        }
 
        // moves to the next track
        function nextTrack() {
            if (track_index < track_list.length - 1)
                track_index += 1;
            else track_index = 0;
            loadTrack(track_index);
            playTrack();
        }
 
        // moves to the previous track
        function prevTrack() {
            if (track_index > 0)
                track_index -= 1;
            else track_index = track_list.length;
            loadTrack(track_index);
            playTrack();
        }
 
        // seeker slider
        function seekTo() {
            seekto = curr_track.duration * (seek_slider.value / 100);
            curr_track.currentTime = seekto;
        }
 
        function seekUpdate() {
            let seekPosition = 0;
            
            // check if the current track duration is a legible number
            if (!isNaN(curr_track.duration)) {
                seekPosition = curr_track.currentTime * (100 / curr_track.duration);
                seek_slider.value = seekPosition;
                
            // calculate the time left and the total duration
            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);
                
            // adding a zero to the single digit time values
            if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
            if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
            if (currentMinutes < 10) { currentMinutes = currentMinutes; }
            if (durationMinutes < 10) { durationMinutes = durationMinutes; }
 
            curr_time.textContent = currentMinutes + ":" + currentSeconds;
            total_duration.textContent = durationMinutes + ":" + durationSeconds;
          }
        }
        
        // load the first track in the tracklist
        loadTrack(track_index);
         </script>

css

#musicplayer{ 
  font-family: 'pixel';
  font-weight:bold;
  height:30px;
  width:100%;
  left:0;
  position:fixed;
  margin-bottom:20px;
   
  display:flex;
  
  background: linear-gradient(180deg,#f0f5ff 0%,   #77BBFF 100%);/* background of player */
  border:ridge 2px #77BBFF;/* border around player */
  outline: solid 2px black;  
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);

}
 
    .songtitle{ 
    display:block;
    padding:2px; /* padding around song title */
    font-family: 'pixel';
    margin-top:4px;
    margin-right: 5px; 
    font-size:15px;
    color:black;
    letter-spacing: 1px;

background: white;/* background of song title */
    border: gray inset 1px;
       border-radius:6px;
       box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
 
    .controls{
      font-size:12px; /* size of controls */
      text-align:center;
      width:100px;
      height:20px;
      text-decortation:none;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
 
    .controls td{
       padding-top:5px; /* padding around controls */
    }
 
    .seeking{
      width:75%;
      background: transparent;/* background color of seeking bar */
      display:flex;
      justify-content: space-evenly;
      padding:7px; /* padding around seeking bar */
        
    }
 
    .current-time{  
      padding-right:5px;
      margin-right: 3px; 
     filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
       
    }
 
    .total-duration{
      padding-left:5px;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
 
    i.fas:hover{
        cursor:help;
    }
 
    i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
        color:black; /* color of controls */
        font-style: normal;
       
    }
    
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
      background: transparent;
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px; /* thickness of seeking track */
        cursor: help;
        border-radius: 6px;
        background: black; /* color of seeking track */
        
    }

input[type=range]::-webkit-slider-thumb {
      
        height: 30px; /* height of seeking square */
        width: 20px; /* width of seeking square */
        background-image:  url(https://files.catbox.moe/ril1jr.gif); /* image of  seeking square */
        background-size: 25px;
        -webkit-appearance: none;
        margin-top: -10px;
        
    }
    
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: white; /* color of volume seeking track */
     filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
    }
    
 input[type=range].volume_slider::-webkit-slider-thumb {
    background-image: url(https://wilardo.crd.co/assets/images/gallery14/798d7d72_original.png?v=d0e71742);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
   }
 
 
.slider_container {  
  width: 15%;       /* width of volume seeker */
  display: flex;
  justify-content: center;
  align-items: center;
}