JavaScript Bongo Cat Music Player

A simple music player with a bongo cat. Playing the music starts the bongo cat animation. The Music player is made using Html, CSS, and JavaScript.

Made by Victor.

Related Posts

The Html Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
</head>
<body>
  <div class="container">
		<img id="cat-id" class="cat" src="https://1.bp.blogspot.com/-k7LnAqs2Wh8/X23S4z2jVvI/AAAAAAAAM8Q/ULL5DOyaTU8QmaXcIJRqXxmaS_4EthK6wCLcBGAsYHQ/s1105/cat.gif" alt="meow!" onclick="meow()"></img>

		<div class="player">
			<div class="track-name">Track Name</div>
			<div class="track-artist">Track Artist</div>
		</div>

		<div class="buttons">
			<div class="prev-track" onclick="prevTrack()"></div>
            <div class="playpause-track" onclick="playpauseTrack() "></div>
            <div class="next-track" onclick="nextTrack()"></div>
		</div>

		<div class="slider_container">
         	<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">00:00</div>
        </div>
	</div>
</body>
</html>

The CSS Code

@import url(https://fonts.googleapis.com/css?family=Loved+by+the+King);

body {
  text-align: center;
  font-family: 'Loved by the King';
  color: white;
  background: #242a36;
}

@media(max-width: 400px){
	.container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.cat {
		width: 250px;
		height: 250px;
	}

	/* Details */
	.player {
	  	margin-top: -60px;
	}
	.track-name {
		font-size: 30px;
		color: white;
	}
	.track-artist {
		font-size: 20px;
		color: white;
	}
	.current-time {
		font-size: 18px;
		color: white;
		margin-right: 8px;
	}
	.total-duration {
		font-size: 18px;
		color: white;
		margin-left: 8px;
	}

	/* Buttons */
	.buttons {
		width: 100%;
	  	max-width: 400px;
	  	margin-bottom: 6px;
	  	margin-top: 12px;
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	}
	.prev-track {
		width: 35px;
		height: 35px;
		background: url('https://1.bp.blogspot.com/-judpaTZpIZs/X23S6tCTxXI/AAAAAAAAM8g/Jd3x9x0VF-M-HDh-UdZTeSjVwLMRVTHFACLcBGAsYHQ/s35/prev_button.png');
	}
	.playpause-track {
		width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.next-track {
		width: 35px;
		height: 35px;
		background: url('https://1.bp.blogspot.com/-WIhQOKUxWrQ/X23S5hyQmWI/AAAAAAAAM8U/pfN7GijmXfgFzQMP6ZMphwvYw0b8p6WUACLcBGAsYHQ/s35/next_button.png');
	}

	/* Slider */
	.slider_container {
		width: 100%;
	  	max-width: 400px;
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	}
	.seek_slider,
	.volume_slider {
	  	-webkit-appearance: none;
	  	-moz-appearance: none;
	  	appearance: none;
	  	height: 6px;
	  	background: url('https://1.bp.blogspot.com/-jvhQK1mKUZs/X23S67YynsI/AAAAAAAAM8o/AsE2zFgIPigfzJMUQJz2yfZOQuN_gn77wCLcBGAsYHQ/s400/slider.png');
	  	opacity: 0.7;
	}
	.seek_slider::-webkit-slider-thumb,
	.volume_slider::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  width: 15px;
	  height: 15px;
	  background: url('https://1.bp.blogspot.com/-zY8znPJy6MA/X23S7s3k_rI/AAAAAAAAM8s/Fner4bgVZzIIR2e9rwD-2wC_yOF5JWhpACLcBGAsYHQ/s320/slider_thumb.png');
	  cursor: pointer;
	  border-radius: 50%;
	}
}

@media(min-width: 401px){
	.container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.cat {
		margin-top: -35px;
		width: 300px;
		height: 300px;
	}

	/* Details */
	.player {
	  	margin-top: -80px;
	}
	.track-name {
		font-size: 35px;
		color: white;
	}
	.track-artist {
		font-size: 20px;
		color: white;
	}
	.current-time {
		font-size: 20px;
		color: white;
		margin-right: 10px;
	}
	.total-duration {
		font-size: 20px;
		color: white;
		margin-left: 10px;
	}

	/* Buttons */
	.buttons {
		width: 100%;
	  	max-width: 400px;
	  	margin-bottom: 6px;
	  	margin-top: 12px;
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	}
	.prev-track {
		width: 35px;
		height: 35px;
		background: url('https://1.bp.blogspot.com/-judpaTZpIZs/X23S6tCTxXI/AAAAAAAAM8g/Jd3x9x0VF-M-HDh-UdZTeSjVwLMRVTHFACLcBGAsYHQ/s35/prev_button.png');
	}
	.playpause-track {
		width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.next-track {
		width: 35px;
		height: 35px;
		background: url('https://1.bp.blogspot.com/-WIhQOKUxWrQ/X23S5hyQmWI/AAAAAAAAM8U/pfN7GijmXfgFzQMP6ZMphwvYw0b8p6WUACLcBGAsYHQ/s35/next_button.png');
	}

	/* Slider */
	.slider_container {
		width: 100%;
	  	max-width: 400px;
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	}
	.seek_slider,
	.volume_slider {
	  	-webkit-appearance: none;
	  	-moz-appearance: none;
	  	appearance: none;
	  	height: 6px;
	  	background: url('https://1.bp.blogspot.com/-jvhQK1mKUZs/X23S67YynsI/AAAAAAAAM8o/AsE2zFgIPigfzJMUQJz2yfZOQuN_gn77wCLcBGAsYHQ/s400/slider.png');
	  	opacity: 0.7;
	}
	.seek_slider::-webkit-slider-thumb,
	.volume_slider::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  width: 15px;
	  height: 15px;
	  background: url('https://1.bp.blogspot.com/-zY8znPJy6MA/X23S7s3k_rI/AAAAAAAAM8s/Fner4bgVZzIIR2e9rwD-2wC_yOF5JWhpACLcBGAsYHQ/s320/slider_thumb.png');
	  cursor: pointer;
	  border-radius: 50%;
	}
}

/* Global */
.main {
	min-height: 100%;
	overflow: hidden;
}

The JavaScript Code

function meow() {
  let meow = new Audio("https://raw.githubusercontent.com/tilnoene/Ola-Mundo/master/meow.mp3");
  meow.play();
}

let now_playing = document.querySelector(".now-playing");
let track_art = document.querySelector(".track-art");
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 cat = document.querySelector(".cat");

let track_index = 0;
let isPlaying = false;
let updateTimer;

// Create new audio element
let curr_track = document.createElement('audio');

// Define the tracks that have to be played
let track_list = [
{
  name: "Sound Test",
  artist: "Unknown",
  image: "https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/1.mp3" },

// LADO A
{
  name: "Hope",
  artist: "xxxtentacion",
  image: "https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A1_Hope.mp3" },

{
  name: "Nervous",
  artist: "The Neighbourhood",
  image: "https://images.pexels.com/photos/3100835/pexels-photo-3100835.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A2_Nervous.mp3" },

{
  name: "Reflections",
  artist: "The Neighbourhood",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A3_Reflections.mp3" },

{
  name: "Falling Down",
  artist: "Lil Peep and xxxtentacion",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A4_Falling Down.mp3" },

{
  name: "Cidade Lunar",
  artist: "Konai x Kadu Brown",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A5_Cidade Lunar.mp3" },

{
  name: "ร‰ a Uniรฃo Flasco",
  artist: "LUCKHAOS feat. Lucas Hype",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A6_Uniรฃo Flasco.mp3" },

// LADO B
{
  name: "Are You Bored Yet",
  artist: "Wallows feat. Clairo",
  image: "https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B1_Are You Bored Yet.mp3" },

{
  name: "Sweater Weather",
  artist: "The Neighbourhood",
  image: "https://images.pexels.com/photos/3100835/pexels-photo-3100835.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B2_Sweater Weather.mp3" },

{
  name: "death bed",
  artist: "powfu feat. beabadoobee",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B3_death bed.mp3" },

{
  name: "Teeth",
  artist: "5 Seconds of Summer",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B4_Teeth.mp3" },

{
  name: "Youngblood",
  artist: "5 Seconds of Summer",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B5_Youngblood.mp3" },

{
  name: "Valentine",
  artist: "5 Seconds of Summer",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B6_Valentine.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;

  // 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 = "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 = '<img src="https://1.bp.blogspot.com/-ZLNjPPb50UI/X23S5yvvtZI/AAAAAAAAM8Y/S_t4O4JS13scUeOK2BqJDGMMAB7LX89fACLcBGAsYHQ/s50/pause_button.png">';
  document.getElementById("cat-id").src = "https://1.bp.blogspot.com/-k7LnAqs2Wh8/X23S4z2jVvI/AAAAAAAAM8Q/ULL5DOyaTU8QmaXcIJRqXxmaS_4EthK6wCLcBGAsYHQ/s1105/cat.gif";
}

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

  // Replace icon with the play icon
  playpause_btn.innerHTML = '<img src="https://1.bp.blogspot.com/-r0SmykdPjC0/X23S6MiJvvI/AAAAAAAAM8c/v5clFutiUAwQ7VnbRG7I9hCUsXvzaZ1MACLcBGAsYHQ/s320/play_button.png">';
  document.getElementById("cat-id").src = "https://1.bp.blogspot.com/-ViAxhWYUWZw/X23S4_6KZvI/AAAAAAAAM8I/c9B9Zha8XHoj5OSpTYlgE0W6ttC5G2mZACLcBGAsYHQ/s1105/cat2.jpg";
}

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);

pauseTrack();

The Complete Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url(https://fonts.googleapis.com/css?family=Loved+by+the+King);

body {
  text-align: center;
  font-family: 'Loved by the King';
  color: white;
  background: #242a36;
}

@media(max-width: 400px){
	.container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.cat {
		width: 250px;
		height: 250px;
	}

	/* Details */
	.player {
	  	margin-top: -60px;
	}
	.track-name {
		font-size: 30px;
		color: white;
	}
	.track-artist {
		font-size: 20px;
		color: white;
	}
	.current-time {
		font-size: 18px;
		color: white;
		margin-right: 8px;
	}
	.total-duration {
		font-size: 18px;
		color: white;
		margin-left: 8px;
	}

	/* Buttons */
	.buttons {
		width: 100%;
	  	max-width: 400px;
	  	margin-bottom: 6px;
	  	margin-top: 12px;
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	}
	.prev-track {
		width: 35px;
		height: 35px;
		background: url('https://1.bp.blogspot.com/-judpaTZpIZs/X23S6tCTxXI/AAAAAAAAM8g/Jd3x9x0VF-M-HDh-UdZTeSjVwLMRVTHFACLcBGAsYHQ/s35/prev_button.png');
	}
	.playpause-track {
		width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.next-track {
		width: 35px;
		height: 35px;
		background: url('https://1.bp.blogspot.com/-WIhQOKUxWrQ/X23S5hyQmWI/AAAAAAAAM8U/pfN7GijmXfgFzQMP6ZMphwvYw0b8p6WUACLcBGAsYHQ/s35/next_button.png');
	}

	/* Slider */
	.slider_container {
		width: 100%;
	  	max-width: 400px;
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	}
	.seek_slider,
	.volume_slider {
	  	-webkit-appearance: none;
	  	-moz-appearance: none;
	  	appearance: none;
	  	height: 6px;
	  	background: url('https://1.bp.blogspot.com/-jvhQK1mKUZs/X23S67YynsI/AAAAAAAAM8o/AsE2zFgIPigfzJMUQJz2yfZOQuN_gn77wCLcBGAsYHQ/s400/slider.png');
	  	opacity: 0.7;
	}
	.seek_slider::-webkit-slider-thumb,
	.volume_slider::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  width: 15px;
	  height: 15px;
	  background: url('https://1.bp.blogspot.com/-zY8znPJy6MA/X23S7s3k_rI/AAAAAAAAM8s/Fner4bgVZzIIR2e9rwD-2wC_yOF5JWhpACLcBGAsYHQ/s320/slider_thumb.png');
	  cursor: pointer;
	  border-radius: 50%;
	}
}

@media(min-width: 401px){
	.container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.cat {
		margin-top: -35px;
		width: 300px;
		height: 300px;
	}

	/* Details */
	.player {
	  	margin-top: -80px;
	}
	.track-name {
		font-size: 35px;
		color: white;
	}
	.track-artist {
		font-size: 20px;
		color: white;
	}
	.current-time {
		font-size: 20px;
		color: white;
		margin-right: 10px;
	}
	.total-duration {
		font-size: 20px;
		color: white;
		margin-left: 10px;
	}

	/* Buttons */
	.buttons {
		width: 100%;
	  	max-width: 400px;
	  	margin-bottom: 6px;
	  	margin-top: 12px;
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	}
	.prev-track {
		width: 35px;
		height: 35px;
		background: url('https://1.bp.blogspot.com/-judpaTZpIZs/X23S6tCTxXI/AAAAAAAAM8g/Jd3x9x0VF-M-HDh-UdZTeSjVwLMRVTHFACLcBGAsYHQ/s35/prev_button.png');
	}
	.playpause-track {
		width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-right: 20px;
	}
	.next-track {
		width: 35px;
		height: 35px;
		background: url('https://1.bp.blogspot.com/-WIhQOKUxWrQ/X23S5hyQmWI/AAAAAAAAM8U/pfN7GijmXfgFzQMP6ZMphwvYw0b8p6WUACLcBGAsYHQ/s35/next_button.png');
	}

	/* Slider */
	.slider_container {
		width: 100%;
	  	max-width: 400px;
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	}
	.seek_slider,
	.volume_slider {
	  	-webkit-appearance: none;
	  	-moz-appearance: none;
	  	appearance: none;
	  	height: 6px;
	  	background: url('https://1.bp.blogspot.com/-jvhQK1mKUZs/X23S67YynsI/AAAAAAAAM8o/AsE2zFgIPigfzJMUQJz2yfZOQuN_gn77wCLcBGAsYHQ/s400/slider.png');
	  	opacity: 0.7;
	}
	.seek_slider::-webkit-slider-thumb,
	.volume_slider::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  width: 15px;
	  height: 15px;
	  background: url('https://1.bp.blogspot.com/-zY8znPJy6MA/X23S7s3k_rI/AAAAAAAAM8s/Fner4bgVZzIIR2e9rwD-2wC_yOF5JWhpACLcBGAsYHQ/s320/slider_thumb.png');
	  cursor: pointer;
	  border-radius: 50%;
	}
}

/* Global */
.main {
	min-height: 100%;
	overflow: hidden;
}
</style>
</head>
<body>
  <div class="container">
		<img id="cat-id" class="cat" src="https://1.bp.blogspot.com/-k7LnAqs2Wh8/X23S4z2jVvI/AAAAAAAAM8Q/ULL5DOyaTU8QmaXcIJRqXxmaS_4EthK6wCLcBGAsYHQ/s1105/cat.gif" alt="meow!" onclick="meow()"></img>

		<div class="player">
			<div class="track-name">Track Name</div>
			<div class="track-artist">Track Artist</div>
		</div>

		<div class="buttons">
			<div class="prev-track" onclick="prevTrack()"></div>
            <div class="playpause-track" onclick="playpauseTrack() "></div>
            <div class="next-track" onclick="nextTrack()"></div>
		</div>

		<div class="slider_container">
         	<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">00:00</div>
        </div>
	</div>
      <script>
function meow() {
  let meow = new Audio("https://raw.githubusercontent.com/tilnoene/Ola-Mundo/master/meow.mp3");
  meow.play();
}

let now_playing = document.querySelector(".now-playing");
let track_art = document.querySelector(".track-art");
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 cat = document.querySelector(".cat");

let track_index = 0;
let isPlaying = false;
let updateTimer;

// Create new audio element
let curr_track = document.createElement('audio');

// Define the tracks that have to be played
let track_list = [
{
  name: "Sound Test",
  artist: "Unknown",
  image: "https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/1.mp3" },

// LADO A
{
  name: "Hope",
  artist: "xxxtentacion",
  image: "https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A1_Hope.mp3" },

{
  name: "Nervous",
  artist: "The Neighbourhood",
  image: "https://images.pexels.com/photos/3100835/pexels-photo-3100835.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A2_Nervous.mp3" },

{
  name: "Reflections",
  artist: "The Neighbourhood",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A3_Reflections.mp3" },

{
  name: "Falling Down",
  artist: "Lil Peep and xxxtentacion",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A4_Falling Down.mp3" },

{
  name: "Cidade Lunar",
  artist: "Konai x Kadu Brown",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A5_Cidade Lunar.mp3" },

{
  name: "ร‰ a Uniรฃo Flasco",
  artist: "LUCKHAOS feat. Lucas Hype",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/A6_Uniรฃo Flasco.mp3" },

// LADO B
{
  name: "Are You Bored Yet",
  artist: "Wallows feat. Clairo",
  image: "https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B1_Are You Bored Yet.mp3" },

{
  name: "Sweater Weather",
  artist: "The Neighbourhood",
  image: "https://images.pexels.com/photos/3100835/pexels-photo-3100835.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B2_Sweater Weather.mp3" },

{
  name: "death bed",
  artist: "powfu feat. beabadoobee",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B3_death bed.mp3" },

{
  name: "Teeth",
  artist: "5 Seconds of Summer",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B4_Teeth.mp3" },

{
  name: "Youngblood",
  artist: "5 Seconds of Summer",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B5_Youngblood.mp3" },

{
  name: "Valentine",
  artist: "5 Seconds of Summer",
  image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
  path: "musics/B6_Valentine.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;

  // 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 = "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 = '<img src="https://1.bp.blogspot.com/-ZLNjPPb50UI/X23S5yvvtZI/AAAAAAAAM8Y/S_t4O4JS13scUeOK2BqJDGMMAB7LX89fACLcBGAsYHQ/s50/pause_button.png">';
  document.getElementById("cat-id").src = "https://1.bp.blogspot.com/-k7LnAqs2Wh8/X23S4z2jVvI/AAAAAAAAM8Q/ULL5DOyaTU8QmaXcIJRqXxmaS_4EthK6wCLcBGAsYHQ/s1105/cat.gif";
}

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

  // Replace icon with the play icon
  playpause_btn.innerHTML = '<img src="https://1.bp.blogspot.com/-r0SmykdPjC0/X23S6MiJvvI/AAAAAAAAM8c/v5clFutiUAwQ7VnbRG7I9hCUsXvzaZ1MACLcBGAsYHQ/s320/play_button.png">';
  document.getElementById("cat-id").src = "https://1.bp.blogspot.com/-ViAxhWYUWZw/X23S4_6KZvI/AAAAAAAAM8I/c9B9Zha8XHoj5OSpTYlgE0W6ttC5G2mZACLcBGAsYHQ/s1105/cat2.jpg";
}

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);

pauseTrack();
    </script>
</body>
</html>