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 {
}

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

.controls {
font-size: 12px !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: 0.875em;
color: #000000;
}

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

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: 5px;
cursor: help;
animate: 0.2s;
background: #F8FCF8;
border-radius: 1px;
}

input[type=range]::-webkit-slider-thumb {
border:ridge #CCCCCC;
border-width: 4px 2px 4px 2px;
height: 15px;
width: 10px;
border-radius: 2px;
background: #F8FCF8;
cursor: help;
-webkit-appearance: none;
margin-top: 3px;
}

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

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

input[type=range]::-moz-range-thumb {
border: 0px solid #F8FCF8;
height: 10px;
width: 10px;
border-radius: 10px;
background: #F8FCF8;
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: #F8FCF8;
border-radius: 2px;
}

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

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

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

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

<body>
<div id="musicplayer">
<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>

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

<br>

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

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

</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 the tracks that have to be played
let track_list = [
{
name:"pictureinmymind",
path:"https://cdn.glitch.global/7eefa97e-e9ba-47ff-9a9a-ad662be1fc2f/Picture%20in%20my%20mind.mp3?v=1665967806994"
},
{
name:"colordrive",
path:"https://cdn.glitch.global/7eefa97e-e9ba-47ff-9a9a-ad662be1fc2f/Color%20Drive.mp3?v=1665968283490"
},
{
name:"yellowcab",
path:"https://cdn.glitch.global/7eefa97e-e9ba-47ff-9a9a-ad662be1fc2f/Yellow%20Cab.mp3?v=1665968992322"
},
{
name: "wondrousplace",
path: "https://cdn.glitch.global/7eefa97e-e9ba-47ff-9a9a-ad662be1fc2f/Wondrous%20Place.mp3?v=1665968516457",
},
];

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: #808480"></i>';
}

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

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