text: const track = document.getElementById("track");
  const thumbnail = document.getElementById("thumbnail");
  const background = document.getElementById("background");
  const trackArtist = document.getElementById("track-artist");
  const trackTitle = document.getElementById("track-title");
  const progressBar = document.getElementById("progressBar");
  const currentTime = document.getElementById("currentTime");
  const durationTime = document.getElementById("durationTime");
  
  let play = document.getElementById("play");
  let pause = document.getElementById("pause");
  let next = document.getElementById("next-track");
  let prev = document.getElementById("prev-track");
  trackIndex = 0;
  
  tracks = [
    "https://paglasongs.com/files/download/id/1451",
    "https://res.cloudinary.com/cbanlawi/video/upload/v1614144520/Justin_Bieber-Yummy_vercib.mp3",
    "https://newmirchi.in/files/download/id/1669"
  ];
  thumbnails = [
    "https://static.billboard.com/files/media/Alan-Walker-press-photo-by-Stian-Andersen-2017-billboard-1548-compressed.jpg",
    "https://i.ibb.co/dkDC9CP/Justin-Bieber-Song-Cover-Art.jpg",
    "https://i.ibb.co/7RhfRBZ/Fine-Line-Harry-Styles.jpg"
  ];
  trackArtists = ["Alan Walkers", "Justin Bieber", "Harry Styles"];
  trackTitles = ["Darkside", "Yummy", "Watermelon Sugar"];
  
  let playing = true;
  
  function pausePlay() {
    if (playing) {
      play.style.display = "none";
      pause.style.display = "block";
  
      thumbnail.style.transform = "scale(1.25)";
  
      track.play();
      playing = false;
    } else {
      pause.style.display = "none";
      play.style.display = "block";
  
      thumbnail.style.transform = "scale(1)";
  
      track.pause();
      playing = true;
    }
  }
  
  play.addEventListener("click", pausePlay);
  pause.addEventListener("click", pausePlay);
  
  track.addEventListener("ended", nextTrack);
  
  function nextTrack() {
    trackIndex++;
    if (trackIndex > tracks.length - 1) {
      trackIndex = 0;
    }
  
    track.src = tracks[trackIndex];
    thumbnail.src = thumbnails[trackIndex];
    background.src = thumbnails[trackIndex];
  
    trackArtist.textContent = trackArtists[trackIndex];
    trackTitle.textContent = trackTitles[trackIndex];
  
    playing = true;
    pausePlay();
  }
  
  next.addEventListener("click", nextTrack);
  
  function prevTrack() {
    trackIndex--;
    if (trackIndex < 0) {
      trackIndex = tracks.length - 1;
    }
  
    track.src = tracks[trackIndex];
    thumbnail.src = thumbnails[trackIndex];
    background.src = thumbnails[trackIndex];
  
    trackArtist.textContent = trackArtists[trackIndex];
    trackTitle.textContent = trackTitles[trackIndex];
  
    playing = true;
    pausePlay();
  }
  
  prev.addEventListener("click", prevTrack);
  
  function progressValue() {
    progressBar.max = track.duration;
    progressBar.value = track.currentTime;
  
    currentTime.textContent = formatTime(track.currentTime);
    durationTime.textContent = formatTime(track.duration);
  }
  
  setInterval(progressValue, 500);
  
  function formatTime(sec) {
    let minutes = Math.floor(sec / 60);
    let seconds = Math.floor(sec - minutes * 60);
    if (seconds < 10) {
      seconds = `0${seconds}`;
    }
    return `${minutes}:${seconds}`;
  }
  
  function changeProgressBar() {
    track.currentTime = progressBar.value;
  }
  
  progressBar.addEventListener("click", changeProgressBar);
  