Simple Music Player
PLAYING x OF y
Track Name
Track Artist
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_art.style.backgroundImage = "url(" + track_list[track_index].image + ")";
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);
}
function random_bg_color() {
// Get a random number between 64 to 256 (for getting lighter colors)
let red = Math.floor(Math.random() * 256) + 64;
let green = Math.floor(Math.random() * 256) + 64;
let blue = Math.floor(Math.random() * 256) + 64;
// Construct a color withe the given values
let bgColor = "rgb(" + red + "," + green + "," + blue + ")";
// Set the background to that color
document.body.style.background = bgColor;
}
// Reset Values
function resetValues() {
curr_time.textContent = "00:00";
total_duration.textContent = "00: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 = '
';
}
function pauseTrack() {
curr_track.pause();
isPlaying = false;
// Replace icon with the play icon
playpause_btn.innerHTML = '
';;
}
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 setVolume() {
curr_track.volume = volume_slider.value / 100;
}
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 = "0" + currentMinutes; }
if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }
curr_time.textContent = currentMinutes + ":" + currentSeconds;
total_duration.textContent = durationMinutes + ":" + durationSeconds;
}
}
// Load the first track in the tracklist
loadTrack(track_index);
body {
background-color: white;
/* Smoothly transition the background color */
transition: background-color .5s;
}
.player {
width: 100%;
height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.details {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 25px;
}
.track-art {
margin-top: 10px;
height: 200px;
width: 200px;
background-image: url("https://bafybeibtatw4boc347724hr76d4jprso5zcvt7i5qbalszbqpca6rigtky.ipfs.infura-ipfs.io/");
background-size: cover;
border-radius: 100%;
animation: rotation 3.6s infinite linear;
}
.now-playing {
font-size: 1rem;
font-family: "Helvetica", Times, serif;
text-align: center;
}
.track-name {
font-size: 1.5rem;
font-family: "Helvetica", Times, serif;
text-align: center;
}
.track-artist {
font-size: 1rem;
font-family: "Helvetica", Times, serif;
padding: 10px;
text-align: center;
}
.buttons {
display: flex;
flex-direction: column;
align-items: center;
}
.playpause-track,
.prev-track,
.next-track {
padding: 10px;
opacity: 0.8;
/* Smoothly transition the opacity */
transition: opacity .2s;
}
.playpause-track:hover,
.prev-track:hover,
.next-track:hover {
opacity: 1.0;
}
.slider_container {
width: 75%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Modify the appearance of the slider */
.seek_slider,
.volume_slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 5px;
background: black;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb,
.volume_slider::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 15px;
height: 15px;
background: black;
cursor: pointer;
border-radius: 100%;
}
.seek_slider:hover,
.volume_slider:hover {
opacity: 1.0;
}
.seek_slider {
width: 100%;
margin-bottom: 10px;
}
.volume_slider {
width: 100%;
margin-top: 10
Simple Music Player
