multi song music digi player

<!-----

multiple song music player by adilene @ adilene.net. free to use and edit as you like! credit is not necessary, but it is appreciated! <3

if you need any help feel free to reach out to me at adilene.net!

source code: https://github.com/sayantanm19/js-music-player

----->

<head>
<script src="https://unpkg.com/phosphor-icons"></script>

<style>
@font-face {
font-family: Nintendo-DS-BIOS;
src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
}

#musicplayer {
position: relative;
}

.songtitle {
font-family: Nintendo-DS-BIOS;
font-size: 1em;
color: white;
-webkit-filter: drop-shadow(0px 0px 1px #525252);
}

.controls {
font-size: 18px !important;
text-align: center;
width: 100%;
}

.controls td {
padding: 0px 5px 0px 5px;
}

.seeking {
display: flex;
justify-content: space-evenly;
}

.current-time {
padding-right: 5px;
font-family: Nintendo-DS-BIOS;
font-size: 1em;
color: #886c63;
}

.total-duration {
padding-left: 5px;
font-family: Nintendo-DS-BIOS;
font-size: 1em;
color: #886c63;
}

input[type=range] {
-webkit-appearance: none;
width: 100%;
background-color: transparent;
}

input[type=range]:focus {
outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: help;
animate: 0.2s;
background: #886c63;
border-radius: 1px;
}

input[type=range]::-webkit-slider-thumb {
border: 0px solid #000;
height: 10px;
width: 10px;
border-radius: 10px;
background: #886c63;
cursor: help;
-webkit-appearance: none;
margin-top: -4px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: #886c63;
}

input[type=range]::-moz-range-track {
width: 100%;
height: 2px;
cursor: help;
animate: 0.2s;
background: #886c63;
border-radius: 1px;
}

input[type=range]::-moz-range-thumb {
border: 0px solid #000;
height: 10px;
width: 10px;
border-radius: 10px;
background: #886c63;
cursor: help;
}

input[type=range]::-ms-track {
width: 100%;
height: 2px;
cursor: help;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}

input[type=range]::-ms-fill-lower {
background: #886c63;
border-radius: 2px;
}

input[type=range]::-ms-fill-upper {
background: #886c63;
border-radius: 2px;
}

input[type=range]::-ms-thumb {
margin-top: 1px;
border: 0px solid #886c63;
height: 10px;
width: 10px;
border-radius: 10px;
background: #886c63;
cursor: help;
}

input[type=range]:focus::-ms-fill-lower {
background: #886c63;
}

input[type=range]:focus::-ms-fill-upper {
background: #886c63;
}
</style>
</head>

<body>
<div id="musicplayer">
<div>

<div class="songtitle"></div>

<table class="controls">
<tr>
<td>
<div class="prev-track" onclick="prevTrack()"><i class="ph-skip-back-fill" style="color: #886c63"></i></div>
</td>
<td>
<div class="playpause-track" onclick="playpauseTrack()" ><i class="ph-play-fill" style="color: #886c63"></i></div>
</td>
<td>
<div class="next-track" onclick="nextTrack()"><i class="ph-skip-forward-fill" style="color: #886c63"></i></div>
</td>
</tr>
</table>

<div class="seeking">
<div class="current-time">0:00</div>

<input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">

<div class="total-duration">0:00</div>
</div>

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

<script>
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 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:"3rd eye - stray kids",
path:"https://dl.dropbox.com/s/lqdf91mf9nvshb4/3rd%20Eye.mp3"
},
{
name:"inabakumori feat. kaai yuki - kimi ni kaikisen",
path:"https://files.catbox.moe/1pxdnw.mp3"
},
{
name:"pinocchio-p feat. hatsune miku - god-ish",
path:"https://files.catbox.moe/xv3vdj.mp3"
},
{
name: "syudou feat. hatsune miku - her boyfriend, jude",
path: "https://files.catbox.moe/49iuxl.mp3",
},
];

function loadTrack(track_index) {
clearInterval(updateTimer);
resetValues();

// Load a new track
curr_track.src = track_list[track_index].path;
curr_track.load();

// 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;
}

function playpauseTrack() {
if (!isPlaying) playTrack();
else pauseTrack();
}

function playTrack() {
curr_track.play();
isPlaying = true;

// Replace icon with the pause icon
playpause_btn.innerHTML = '<i class="ph-pause-fill" style="color: #886c63"></i>';
}

function pauseTrack() {
curr_track.pause();
isPlaying = false;

// Replace icon with the play icon
playpause_btn.innerHTML = '<i class="ph-play-fill" style="color: #886c63"></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() {
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>
</body>