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>