The Lab | Music Players

Music Player 1

// Paste this inside <head> </head>:
<style>
#musicplayer {
font-family: 'Arial';
/* default font */
background: rgb(0, 0, 0);
/* background color of player */
border: 4px solid #bbff00;
/* border around player */
width: 200px;
/* width of the player - make it 100% if you want it to fill your container */
padding: 10px;
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}

.songtitle,
.track-info,
.now-playing {
padding: 5px;
}

.controls {
display: flex;
flex-direction: column;
gap: 10px;
}

.buttons {
display: flex;
justify-content: center;
font-size: 17px !important;
/* size of controls */
width: 100%;
}

.buttons div {
width: 33.3%;
}

.playpause-track,
.prev-track,
.next-track {
color: #bbff00;
/* color of buttons */
font-size: 35px !important;
/* size of buttons */
}

.volume-icon {
font-size: 22px !important;
/* size of volume icon */
}

.seeking,
.volume {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}

.now-playing,
.track-info {
background-color: #bbff00;
/* background color of top two boxes */
}

.now-playing {
font-weight: bold;
}

input[type=range] {
appearance: none;
/* removes default appearance of the tracks */
width: 100%;
}

input[type=range]:focus {
outline: none;
/* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
/* thickness of seeking track */
background: #bbff00;
/* color of seeking track */
}

input[type=range]::-webkit-slider-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: #bbff00;
/* color of seeker square */
-webkit-appearance: none;
margin-top: -3px;
/* 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: #bbff00;
/* 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: #bbff00;
/* color of seeker square */
border: none;
/* removes weird border around seeker square in firefox */
}
</style>
// Place this in <body></body>
<div id="musicplayer">
<div class="now-playing">Playing 1 of 2</div>

<div class="track-info">
<div class="track-name">Song Name</div>
<div class="track-artist"></div>
</div>

<div class="controls">
<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="buttons">
<div class="prev-track" onclick="prevTrack()">&#171;</div>

<div class="playpause-track" onclick="playpauseTrack()">&#9654;</div>

<div class="next-track" onclick="nextTrack()">&#187;</div>
</div>

<div class="volume">
<div class="volume-icon">&#128362;</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>
</div>

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

<script>
// 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: "Gaijin",
artist: "Elijah Nang",
path: "https://files.catbox.moe/0czhcg.mp3"
},
{
name: "Relaxing and Rain",
artist: "Animal Crossing",
path: "https://files.catbox.moe/nwewpp.mp3"
},
{
name: "number 1",
artist: "기분이 편안해지는 귀여운 음악 모음",
path: "https://files.catbox.moe/lz5ogz.mp3"
},
{
name: "Her Boyfriend, Jude",
artist: "Syudou",
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();

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

// 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 = '&#9646;';
}

// pauses track when pause button is pressed
function pauseTrack() {
curr_track.pause();
isPlaying = false;

playpause_btn.innerHTML = '&#9654;';
}

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

Code: adilene.net music player (lite)

Music Player 2

//Paste this inside <head></head>:
<style>
body,
html {
overflow-x: hidden
}

lol,
.img2 {
/* album's cover image u can change the size! */
position: relative;
width: 180px;
height: 180px;
background-color: black;
color: black;
z-index: 999;
}

.img1 {
/* cd image u can change the size too */
position: absolute;
width: auto;
height: 180px;
left: 120px;
z-index: 800;
-webkit-animation: spin 2s linear infinite;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}

.img1 hover {
cursor: help;
}

@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}

@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

.img1:hover {
/* this makes the cd stop spinning when hovering! */
animation: pop 0.3s ease;
}
</style>
// Paste this inside <body></body>:
<div id="lol"><img class="img2"
src="https://vgmsite.com/soundtracks/animal-crossing-new-horizons-2020-switch-gamerip/Cover_Alt.jpg"><img
class="img1"
src="https://web.archive.org/web/20220514070535im_/https://cdn.discordapp.com/attachments/822589056256311328/890714753780031488/image0.png">
</div>
<script>
document.getElementById("lol").onclick = function () {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
};

</script><audio id="audio" src="https://files.catbox.moe/nwewpp.mp3"></audio>

Code: [music player] spinning album CD player. cr @girisgoblog

Music Player 3

// Paste this inside <head></head>:
<style>
.title-bar {
background: linear-gradient(90deg, purple, orchid, pink);
}

.player {
width: fit-content;
border: black solid 1px;
border-width: 1px 0px 0px 1px;
margin-left: auto;
margin-right: auto;
}

.controlimg:hover {
cursor: help;
}

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

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

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 21px;
width: 11px;
background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
transform: translateY(-8px);
box-shadow: none;
border: none;
}

input[type="range"].has-box-indicator::-webkit-slider-thumb {
background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
transform: translateY(-10px);
}

input[type="range"]::-moz-range-thumb {
height: 21px;
width: 11px;
border: 0;
border-radius: 0;
background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
transform: translateY(2px);
}

input[type="range"]::-moz-range-thumb {
background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
border: 0;
border-radius: 0;
height: 21px;
transform: translateY(2px);
width: 11px;
}

input[type="range"].has-box-indicator::-moz-range-thumb {
background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
transform: translateY(0px);
}

input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}

input[type="range"]::-moz-range-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}

button,
input,
label,
option,
select,
table,
textarea,
ul.tree-view {
-webkit-font-smoothing: none;
font-family: "Pixelated MS Sans Serif", Arial;
font-size: 11px
}

h1 {
font-size: 5rem
}

h2 {
font-size: 2.5rem
}

h3 {
font-size: 2rem
}

h4 {
font-size: 1.5rem
}

u {
border-bottom: .5px solid #222;
text-decoration: none
}

button,
input[type=reset],
input[type=submit] {
border: none;
border-radius: 0;
box-sizing: border-box;
color: transparent;
min-height: 23px;
min-width: 75px;
padding: 0 12px;
text-shadow: 0 0 #222
}

.vertical-bar,
button,
input[type=reset],
input[type=submit] {
background: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf
}

.vertical-bar {
height: 20px;
width: 4px
}

button:not(:disabled):active,
input[type=reset]:not(:disabled):active,
input[type=submit]:not(:disabled):active {
box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
text-shadow: 1px 1px #222
}

@media (not(hover)) {

button:not(:disabled):hover,
input[type=reset]:not(:disabled):hover,
input[type=submit]:not(:disabled):hover {
box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey
}
}

button:focus,
input[type=reset]:focus,
input[type=submit]:focus {
outline: 1px dotted #000;
outline-offset: -4px
}

button::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner {
border: 0
}

:disabled,
:disabled+label,
input[readonly],
input[readonly]+label {
color: grey
}

:disabled+label,
button:disabled,
input[type=reset]:disabled,
input[type=submit]:disabled {
text-shadow: 1px 1px 0 #fff
}

.title-bar-controls button {
border: none;
border-radius: 0;
box-sizing: border-box;
color: transparent;
min-height: 23px;
min-width: 75px;
padding: 0 12px;
text-shadow: 0 0 #222
}

.title-bar-controls button {
background: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf
}

.title-bar-controls button:not(:disabled):active {
box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
text-shadow: 1px 1px #222
}

@media (not(hover)) {
button:not(:disabled):hover {
box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey
}
}

.title-bar-controls button:focus {
outline: 1px dotted #000;
outline-offset: -4px
}

.title-bar-controls button::-moz-focus-inner {
border: 0
}


@font-face {
font-family: "Pixelated MS Sans Serif";
src: url("https://files.catbox.moe/1za99g.woff") format("woff");
src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Pixelated MS Sans Serif";
src: url("https://files.catbox.moe/z7csle.woff") format("woff");
src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
font-weight: bold;
font-style: normal;
}


.window,
.title-bar {
font-family: "Pixelated MS Sans Serif", Arial;
-webkit-font-smoothing: none;
font-size: 11px;
}

.window {
box-shadow: inset -1px -1px #0a0a0a,
inset 1px 1px #dfdfdf, inset -2px -2px #808080,
inset 2px 2px #ffffff;
background: #c0c0c0;
padding: 3px;
width: 260px;
}

.title-bar {
padding: 3px 2px 3px 3px;
display: flex;
justify-content: space-between;
align-items: center;
}

.title-bar-text {
font-weight: bold;
color: white;
letter-spacing: 0;
margin-right: 24px;
}

.title-bar-controls {
display: flex;
}

.title-bar-controls button {
padding: 0;
display: block;
min-width: 16px;
min-height: 14px;
}

.title-bar-controls button:active {
padding: 0;
}

.title-bar-controls button:focus {
outline: none;
}

.title-bar-controls button[aria-label=Minimize] {
background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position: bottom 3px left 4px;
background-repeat: no-repeat
}

.title-bar-controls button[aria-label=Maximize] {
background-image: url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position: top 2px left 3px;
background-repeat: no-repeat
}

.title-bar-controls button[aria-label=Close] {
background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position: top 3px left 4px;
background-repeat: no-repeat;
margin-left: 2px
}

.window-body {
margin: 0px;
height: 98px;
}



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

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

/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
/* thickness of seeking track */
cursor: help;
}


/* settings for firefox browsers */
input[type=range]::-moz-range-track {
width: 100%;
height: 2px;
/* thickness of seeking track */
cursor: help;
}

.flex {
display: flex;
}

.titlebaricon {
height: 14px;
width: 14px;
}


.songtitlewindow {
background-color: #fff;
box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

#musicplayer {
border: 2px solid silver;
/* border around player */
border-width: 2px 0px 0px 0px;
width: 160px;
/* width of the player */
}

#imagestyle {
background: silver;
/* background color of player */
border: 2px solid silver;
/* border around player */
width: 95px;
/* width of the player */
height: 95px;
box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

.ic {
width: 90px;
position: relative;
bottom: 1px;
right: 1px;
overflow: hidden;
padding: 2px;
border: 2px solid transparent;
}

.songtitlearrow {
background-size: 100%;
background-repeat: no-repeat;
background-image: url(https://files.catbox.moe/f5e8np.png);
height: 21px;
width: 21px;
position: relative;
top: 2px;
left: -2px;
border: 0px solid transparent;
border-width: 0px 0px 0px 0px;
}

.songtitle {
padding: 5px;
/* padding around song title */
border-bottom: 0px;
/* border under song title */
display: block;
font-family: Pixelated MS Sans Serif;
}

.controls {
font-size: 18px !important;
/* size of controls */
text-align: center;
width: 100%;
position: relative;
bottom: 10px;
}

.controls td {
padding: 8px 5px 0px 5px;
/* padding around controls */
}

button {
min-width: 40px;
}

.seeking {
background-color: #c0c0c0;
/* background color of seeking bar */
display: flex;
justify-content: space-evenly;
padding: 14px;
/* padding around seeking bar */
}

.current-time {
padding-right: 5px;
}

.total-duration {
padding-left: 5px;
}

.controlimg {
height: 15px;
width: 15px;
}
</style>
// Paste this inside <body></body>:
<div class="player">
<div class="window">
<div class="title-bar">
<div class="title-bar-text"><sub><img class="titlebaricon" src="https://files.catbox.moe/tg55zp.png"
alt="cd player icon"></sub> CD player</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<div class="flex">
<div id="imagestyle"><img class="ic"
src="https://i.etsystatic.com/11348985/r/il/9597b7/5123050386/il_1588xN.5123050386_eqou.jpg"
alt="momo icon">
</div>
<div id="musicplayer">
<div class="songtitlewindow">
<div class="flex">
<marquee scrollamount="4" class="songtitle"></marquee>
<div class="songtitlearrow"></div>
</div>
</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>

<table class="controls">
<tr>
<td>
<div class="prev-track" onclick="prevTrack()"><button><img
src="https://files.catbox.moe/hhoh1h.png" class="controlimg"></button>
</div>
</td>
<td>
<div class="playpause-track" onclick="playpauseTrack()"><button><img
src="https://files.catbox.moe/w93riq.png" class="controlimg"></button>
</div>
</td>
<td>
<div class="next-track" onclick="nextTrack()"><button><img
src="https://files.catbox.moe/p4q9gf.png" class="controlimg"></button>
</div>
</td>
</tr>
</table>

<audio id="music" src=""></audio>
</div>
</div>
</div>
</div>
</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 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: "Animal Crossing - Relaxing and Rain",
path: "https://files.catbox.moe/nwewpp.mp3"
},
{
name: "Shooting Arrows - The Cat's Whiskers",
path: "https://files.catbox.moe/zj81lr.mp3"
},
{
name: "4 REAL - The Cat's Whiskers",
path: "https://files.catbox.moe/fxd8fo.mp3"
},
{
name: "My Sweetest Love - The Cat's Whiskers ft. Kazuma Mitchell",
path: "https://files.catbox.moe/qe4he5.mp3"
},
{
name: "Mercy On Me - The Cat's Whiskers",
path: "https://files.catbox.moe/w7nnf9.mp3"
}
];
//
//
//
//
//

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 = '<button><img src="https://files.catbox.moe/njer0s.png" class="controlimg"></i></button>';
}

// pauses track when pause button is pressed
function pauseTrack() {
curr_track.pause();
isPlaying = false;

// replace icon with the play icon
playpause_btn.innerHTML = '<button><img src="https://files.catbox.moe/w93riq.png" class="controlimg"></button>';
}

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

Code: win98 music player (no fontawesome update)

Music Player 4

// Paste this inside <head></head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;800&display=swap"
rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<style type="text/css">
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position: relative;
top: 0px;
left: 5px;
display: flex;
z-index: 99;
}

#glenplayer02 a {
text-decoration: none;
}

#glenplayer02>div {
align-self: center;
-webkit-align-self: center;
}

.music-controls {
user-select: none;
-webkit-user-select: none;
width: 13px;
font-size: 18px;
cursor: pointer;
}

.playy,
.pausee {
color: #F6D5F0;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

/* color of play & pause buttons */

.pausee {
display: none;
}

.sonata {
margin-left: 10px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 14px;
color: #F6D5F0;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
/* color of music note symbol */
}

.labeltext {
margin-left: 0px;
position: relative;
bottom: 10px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 14px;
color: #F6D5F0;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
/* color of song title */
}
</style>
// Paste this inside <body></body>
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy">►</div>
<div class="pausee">♬</div>
</div>
<div class="sonata">
<marquee> Animal Crossing - Relaxing and Rain </marquee>
</div>
<div class="labeltext"></div>
</div><!--end music player-->

<audio id="tune" src="https://files.catbox.moe/nwewpp.mp3""audio"></audio>

<div class="labeltext"> </div>

Code: Music player by GlenThemes

Music Player 5

// Paste this inside <head></head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<style type="text/css">
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position: fixed;
top: 2em;
margin-bottom: 20px;
left: 0;
margin-left: 20px;
display: flex;
z-index: 99;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

#glenplayer02 a {
text-decoration: none;
}

#glenplayer02>div {
align-self: center;
-webkit-align-self: center;
}

.music-controls {
user-select: none;
-webkit-user-select: none;
width: 13px;
font-size: 13px;
cursor: pointer;
}

.playy,
.pausee {
color: #fff;
}

/* color of play & pause buttons */

.pausee {
display: none;
}

.sonata {
margin-left: 10px;
color: #000;
/* color of music note symbol */
}

.labeltext {
margin-left: 1px;
font-family: courier new;
font-size: 9px;
color: #fff;
/* color of song title */
}
</style>
// Paste this inside <body></body>:
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="sonata"> </div>
<div class="labeltext"><img src="https://64.media.tumblr.com/tumblr_lu2dd4ocjj1qfoi4t.gif"><img
src="https://64.media.tumblr.com/tumblr_lu2dd4ocjj1qfoi4t.gif"><img
src="https://64.media.tumblr.com/tumblr_lu2dd4ocjj1qfoi4t.gif"><img
src="https://64.media.tumblr.com/tumblr_lu2dd4ocjj1qfoi4t.gif"> </div>
</div><!--end music player-->

<audio id="tune"
src="https://dl.dropbox.com/s/s3mf24vc2gv6y92/%5BEXID%28%EC%9D%B4%EC%97%91%EC%8A%A4%EC%95%84%EC%9D%B4%EB%94%94%29%5D%20%EB%82%B4%EC%9D%BC%ED%95%B4%28LADY%29%20%EB%AE%A4%EC%A7%81%20%EB%B9%84%EB%94%94%EC%98%A4%20%28Official%20Music%20Video%29.mp3?"
audio"></audio>

<div class="labeltext"> </div>

Code: Music player by GlenThemes

Music Player 6


<!-- Paste this inside <style> -->
      .checkbox-wrapper-8 .tgl {
          display: none;
      }
      .checkbox-wrapper-8 .tgl,
      .checkbox-wrapper-8 .tgl:after,
      .checkbox-wrapper-8 .tgl:before,
      .checkbox-wrapper-8 .tgl *,
      .checkbox-wrapper-8 .tgl *:after,
      .checkbox-wrapper-8 .tgl *:before,
      .checkbox-wrapper-8 .tgl + .tgl-btn {
          box-sizing: border-box;
      }
      .checkbox-wrapper-8 .tgl::-moz-selection,
      .checkbox-wrapper-8 .tgl:after::-moz-selection,
      .checkbox-wrapper-8 .tgl:before::-moz-selection,
      .checkbox-wrapper-8 .tgl *::-moz-selection,
      .checkbox-wrapper-8 .tgl *:after::-moz-selection,
      .checkbox-wrapper-8 .tgl *:before::-moz-selection,
      .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,
      .checkbox-wrapper-8 .tgl::selection,
      .checkbox-wrapper-8 .tgl:after::selection,
      .checkbox-wrapper-8 .tgl:before::selection,
      .checkbox-wrapper-8 .tgl *::selection,
      .checkbox-wrapper-8 .tgl *:after::selection,
      .checkbox-wrapper-8 .tgl *:before::selection,
      .checkbox-wrapper-8 .tgl + .tgl-btn::selection {
          background: none;
      }
      .checkbox-wrapper-8 .tgl + .tgl-btn {
          outline: 0;
          display: block;
          width: 4em;
          height: 2em;
          position: relative;
          cursor: pointer;
          user-select: none;
      }
      .checkbox-wrapper-8 .tgl + .tgl-btn:after,
      .checkbox-wrapper-8 .tgl + .tgl-btn:before {
          position: relative;
          display: block;
          content: "";
          width: 50%;
          height: 100%;
      }
      .checkbox-wrapper-8 .tgl + .tgl-btn:after {
          left: 0;
      }
      .checkbox-wrapper-8 .tgl + .tgl-btn:before {
          display: none;
      }
      .checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {
          left: 50%;
      }

      .checkbox-wrapper-8 .tgl-skewed + .tgl-btn {
          overflow: hidden;
          transform: skew(-10deg);
          backface-visibility: hidden;
          transition: all 0.2s ease;
          font-family: sans-serif;
          background: #888;
      }
      .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,
      .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
          transform: skew(10deg);
          display: inline-block;
          transition: all 0.2s ease;
          width: 100%;
          text-align: center;
          position: absolute;
          line-height: 2em;
          font-weight: bold;
          color: #fff;
          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
      }
      .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {
          left: 100%;
          content: attr(data-tg-on);
      }
      .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
          left: 0;
          content: attr(data-tg-off);
      }
      .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {
          background: #888;
      }
      .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
          left: -10%;
      }
      .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
          background: #86d993;
      }
      .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {
          left: -100%;
      }
      .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {
          left: 0;
      }
      .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {
          left: 10%;
      }

<!-- Paste the music player code -->

    <div class="checkbox-wrapper-8">
        <input class="tgl tgl-skewed" id="cb3-8" type="checkbox"/>
        <label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON" for="cb3-8"></label>
    </div>

    <audio id="music" loop>
        <source src="https://files.catbox.moe/bgw8jg.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

<!-- Paste this before </body> -->
    <script>
        const toggle = document.getElementById("cb3-8");
        const music = document.getElementById("music");

        toggle.addEventListener("change", function() {
            if (this.checked) {
                music.play();
            } else {
                music.pause();
                music.currentTime = 0;
            }
        });
    </script>

Created by Me

Music Player 7


 <!-- Paste this inside <style> -->
        .cd-container {
            position: relative;
            width: 150px;
            height: 150px;
        }

        .cd-player {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: url('https://files.catbox.moe/1gifuh.png') no-repeat center/cover;
            border: 3px solid #ccc;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-in-out;
        }

        .cd-player::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .cd-container:hover .play-button {
            opacity: 1;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }


<!-- Paste the music player where you want it to display -->

    <div class="cd-container">
        <div class="cd-player" id="cd"></div>
        <div class="play-button" id="playPauseBtn">▶</div>
    </div>

    <audio id="music">
        <source src="https://files.catbox.moe/bgw8jg.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

<!-- Paste this before </body> -->
    <script>
        const playPauseBtn = document.getElementById("playPauseBtn");
        const music = document.getElementById("music");
        const cd = document.getElementById("cd");
        let isPlaying = false;

        playPauseBtn.addEventListener("click", function() {
            if (isPlaying) {
                music.pause();
                playPauseBtn.innerHTML = "▶";
                cd.style.animation = "none";
            } else {
                music.play();
                playPauseBtn.innerHTML = "⏸";
                cd.style.animation = "spin 3s linear infinite";
            }
            isPlaying = !isPlaying;
        });
    </script>

Created by Me

Music Player 8


 <!--Paste this inside <head> -->
<style>
    .player-container {
      font-family: sans-serif;
    }
    .player-top {
      display: flex;
      align-items: center;
    }
    .cd-cover {
      width: 150px;
      height: 150px;
      background: url('https://files.catbox.moe/1gifuh.png') no-repeat center/cover; /* change the cover here */
      border: 2px solid #ccc;
      border-radius: 5px;
    }
    .controls {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
    }
    .controls button {
      width: 40px;
      height: 40px;
      margin-bottom: 10px;
      font-size: 18px;
      cursor: pointer;
      border: none;
      background-color: #eee;
      border-radius: 4px;
      transition: background 0.2s ease;
    }
    .controls button:hover {
      background-color: #ddd;
    }
    .song-title {
      width: 150px;
      margin-top: 10px;
      text-align: center;
      font-size: 14px;
      color: #333;
    }
  </style>

<!-- Paste this where you want it to display -->


  <div class="player-container">
    <div class="player-top">
      <div class="cd-cover" id="cdCover"></div>
      <div class="controls">
        <button id="playBtn" title="Play">▶</button>
        <button id="pauseBtn" title="Pause">⏸</button>
      </div>
    </div>

    <marquee class="song-title" behavior="scroll" direction="left" scrollamount="3" id="songMarquee">
      Severance - Official Intro Title Sequence 2022
    </marquee>
  </div>


  <audio id="audioPlayer">
    <source src="https://files.catbox.moe/bgw8jg.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

<!--Paste this before </body> -->
  <script>
    const playBtn = document.getElementById("playBtn");
    const pauseBtn = document.getElementById("pauseBtn");
    const audioPlayer = document.getElementById("audioPlayer");

    playBtn.addEventListener("click", () => {
      audioPlayer.play();
    });

    pauseBtn.addEventListener("click", () => {
      audioPlayer.pause();
    });
  </script>

Created by Me