My Page

        
        HTML:
        
        <div id="musicplayer">
            <div class="now-playing"style="display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-evenly; grid-row: 1/3; grid-column: 1/2;">Playing 1 of 2</div>
 
            <div class="track-info" style="display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-evenly; grid-row: 3/4; grid-column: 2/3;">
                <div class="track-name">Song Name</div>
                <div class="track-artist"></div>
            </div>
 
           
                <div class="seeking" style="grid-row: 1/2; grid-column: 2/3; margin: auto;">
                    <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="buttons" style="grid-row: 3/4; grid-column: 1/2; margin: auto;">
                    <div class="prev-track" onclick="prevTrack()"><img src="https://file.garden/afD_PEDycVrE2__g/arrowL.png" style="height: 30px;"></div><!-- img of controls. if you change this, you also have to change it in the javascript. that also counts for the next 2 divs -->
 
                    <div class="playpause-track" onclick="playpauseTrack()"><img src="https://file.garden/afD_PEDycVrE2__g/play.png" style="height: 30px;"></div>
 
                    <div class="next-track" onclick="nextTrack()"><img src="https://file.garden/afD_PEDycVrE2__g/arrowR.png" style="height: 30px;"></div>
                </div>
 
                <div class="volume" style="grid-row: 2/3; grid-column: 2/3; margin: auto;">
                    <div class="volume-icon"><img src="https://file.garden/afD_PEDycVrE2__g/Sans%20titre%2024_20260722015950.png" style="height: 30px;"></div>
                    <input type="range" min="1" max="100" value="25" class="volume_slider" onchange="setVolume()"> <!-- the default volume value is 25, change this if you want it to be higher or lower (i wouldn't recommend it bc it gets really loud) -->
                </div>
            

            <audio id="music" src=""></audio>
        </div>

        
        CSS (made to fit in a box, you'll have to change the musicplayer width/height to concrete values if you want it to work alone):
        
        @font-face {font-family: 'basiic'; src: url('https://file.garden/Zztv0a9yEhr5pmEq/basiic.ttf') format("truetype");}

#musicplayer{
                font-family:'basiic';
                font-weight:bold;
                text-shadow:0px 0px 3px rgb(233, 255, 188), 0px 0px 3px rgb(233, 255, 188), 0px 0px 3px rgb(233, 255, 188), 0px 0px 3px rgb(233, 255, 188), 0px 0px 3px rgb(233, 255, 188) ;
                background:linear-gradient(180deg,rgba(255, 255, 194, 1) 0%, rgba(130, 181, 107, 1) 41%, rgba(72, 130, 30, 1) 43%, rgba(183, 219, 0, 1) 100%); /* background color of player */
                border:3px solid rgba(72, 130, 30, 1); /* border around player */
                border-radius: 5px;
                width:90%; /* width and height are made to fit in a container. if you want the player to be its own thing, you'll need to change these to px or vh/vw. */
                height: 90%;
                margin: 5px auto;
                text-align:center; 
                display:grid;
                grid-template-rows: 25% 25% 50%;
                grid-template-columns: 30% 70%;
            }
 
            .songtitle, .track-info, .now-playing{
                padding: 5px;
                background: url('https://p1x3lz.neocities.org/images/gay/stripe.png'); /* background of the text boxes */
                margin: 7px;
                color: rgb(40, 0, 43);
                border: 10px solid transparent;
                border-image: url('https://p1x3lz.neocities.org/images/gay/eijaww.png') 10 repeat; /* text box lace border. if you dont know how to edit border images, i'd reccomend checnking out w3schools */
                border-image-outset: 5px;
                
            }

            .current-time{
               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 #48821e) drop-shadow(0 0.5px 0 #48821e) drop-shadow(0 0.5px 0 #48821e) drop-shadow(0 0.5px 0.5px #48821e) drop-shadow(0 0.5px #48821e) drop-shadow(0.5px 0.5px 0 #48821e) drop-shadow(0.5px 0.5px 0 #48821e); /* outline of the numbers */
               text-shadow: 0px 0px 0px;
            }

            .total-duration{
               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 #48821e) drop-shadow(0 0.5px 0 #48821e) drop-shadow(0 0.5px 0 #48821e) drop-shadow(0 0.5px 0.5px #48821e) drop-shadow(0 0.5px #48821e) drop-shadow(0.5px 0.5px 0 #48821e) drop-shadow(0.5px 0.5px 0 #48821e);
               text-shadow: 0px 0px 0px;
            }
 
            .controls{
                display:flex; 
                flex-direction:column; 
            }
 
            .buttons{
                display:flex;
                justify-content:center;
                width:100%;
            }
 
            .buttons div{
                width:30%;
            }

            .buttons:hover{
                cursor: pointer;
            }

            .playpause-track, .prev-track, .next-track{
               transition: 0.5s scale; 
            }
 
            .playpause-track:hover, .prev-track:hover, .next-track:hover{
                scale: 1.2;
            }
 
 
            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items: center;
                transition: scale 0.5s;
            }

            .seeking:hover, .volume:hover{
                scale: 1.02;
                cursor: pointer;
            }
 
            .now-playing{
                font-weight:bold;
            }
 
            input[type=range]{
                -webkit-appearance:none; /* removes default appearance of the tracks */
            }
 
            input[type=range]:focus{
                outline:none; /* removes outline around tracks when focusing */
            }
 
            input[type=range]::-webkit-slider-runnable-track{
                width:100%;
                height:3px; /* thickness of seeking track */
                background:rgb(40, 0, 43); /* color of seeking track */
                border-radius: 5px;
            }
 
            input[type=range]::-webkit-slider-thumb{
                height:30px; /* height of seeking square */
                width: 30px;
                background-image: url('https://file.garden/afD_PEDycVrE2__g/fih.png');
                background-size: 100% 100%;
                -webkit-appearance:none;
                margin-top:-15px; /* fixes the weird margin around the seeker square in chrome */
            }
 
            input[type=range]::-moz-range-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:rgb(40, 0, 43); /* color of seeking track */
            }
 
            input[type=range]::-moz-range-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#230d28; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }

        JAVASCRIPT:
        
        // initiate variables
            let now_playing = document.querySelector(".now-playing");
            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.getElementById("music");
 
            //
            // DEFINE YOUR SONGS HERE!!!!!
            // MORE THAN FOUR SONGS CAN BE ADDED!!
            // JUST ADD ANOTHER BRACKET WITH NAME ARTIST AND PATH
            // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES IF YOU DON'T HAVE NEOCITIES SUPPORTER
            let track_list = [
                {
                    name:"Hotondo no Schedule",
                    artist:"Alien 9",
                    path:"https://files.catbox.moe/wgkvlm.mp3"
                },
                {
                    name:"Water Elephant",
                    artist:"Cat Soup",
                    path:"https://files.catbox.moe/35hvtz.mp3"
                },
                {
                    name:"Shitty bitch",
                    artist:"EroruyaP",
                    path:"https://files.catbox.moe/ii03jd.mp3"
                },
                {
                    name: "100 sushi toppings game",
                    artist:"IOSYS",
                    path: "https://file.garden/afD_PEDycVrE2__g/sushitoppinggame",
                },
            ];
            //
            //
            //
            //
            //
 
            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 = track_list[track_index].name;
                track_artist.textContent = track_list[track_index].artist;
                now_playing.textContent = "Playing " + (track_index + 1) + " of " + track_list.length;
 
                // set an interval of 1000 milliseconds for updating the seek slider
                updateTimer = setInterval(seekUpdate, 500);
 
                // 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;
            }
 
            // load the first track in the tracklist
            loadTrack(track_index);
 
            // 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 = '<img src="https://file.garden/afD_PEDycVrE2__g/pause.png" style="height: 25px;">';
            }
 
            // pauses track when pause button is pressed
            function pauseTrack(){
                curr_track.pause();
                isPlaying = false;
 
                playpause_btn.innerHTML = '<img src="https://file.garden/afD_PEDycVrE2__g/play.png" style="height: 25px;">';
            }
 
            // 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;
            }
 
            // volume slider
            function setVolume(){
                curr_track.volume = volume_slider.value / 100;
            }
 
            setVolume();
 
            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;
                }
            }