script.js

const image = document.querySelector('img');
const title = document.getElementById('title');
const artist = document.getElementById('artist');
const music = document.querySelector('audio');
const progressContainer = document.getElementById('progress-container');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const progress = document.getElementById('progress');
const prevBttn = document.getElementById('prev');
const playBttn = document.getElementById('play');
const nextBttn = document.getElementById('next');

// music
const songs = [
  {
    name: 'jacinto-1',
    displayName: 'Electric Chill Machine',
    artist: 'Jacinto Design'
  },
  {
    name: 'jacinto-2',
    displayName: 'Seven Nation Army Remix',
    artist: 'Jacinto Design'
  },
  {
    name: 'jacinto-3',
    displayName: 'Electric Chill Machine',
    artist: 'Jacinto Design'
  },
  {
    name: 'metric-1',
    displayName: 'Electric Chill Machine',
    artist: 'Jacinto Design'
  }
]

// check if playing
let isPlaying = false;

// play
function playSong() {
  isPlaying = true;
  playBttn.classList.replace('fa-play', 'fa-pause');
  playBttn.setAttribute('title', 'Pause');
  music.play();
}

// plause
function pauseSong() {
  isPlaying = false;
  playBttn.classList.replace('fa-pause', 'fa-play');
  playBttn.setAttribute('title', 'Play');
  music.pause();
}

// play or pause event listener
playBttn.addEventListener('click', () => (isPlaying ? pauseSong() : playSong()));

// update title
function loadSong(song) {
  title.textContent = song.displayName;
  artist.textContent = song.artist;
  music.src = `music/${song.name}.mp3`;
  image.src = `imgs/${song.name}.jpg`;
}

// current song
let songIndex = 0;

// prev song
function prevSong() {
  songIndex--;
  if (songIndex < 0) {
    songIndex = songs.length - 1;
  }
  loadSong(songs[songIndex]);
  playSong();
}

// next song
function nextSong() {
  songIndex++;
  if (songIndex > songs.length - 1) {
    songIndex = 0;
  }
  loadSong(songs[songIndex]);
  playSong();
}

// load song on start
loadSong(songs[songIndex]);

function updateProgressBar(e) {
  if (isPlaying) {
    const { duration, currentTime } = e.srcElement;

    // update progress bar
    const progressPercent = (currentTime / duration) * 100;
    progress.style.width = `${progressPercent}%`;

    // calculate display of duration
    const durationMinutes = Math.floor(duration / 60);

    let durationSeconds = Math.floor(duration % 60);
    if (durationSeconds < 10) {
      durationSeconds = `0${durationSeconds}`;
    }

    // delay switching elelemt to avoid NAN
    if (durationSeconds) {
      durationEl.textContent = `${durationMinutes}:${durationSeconds}`;
    }

    // calculate display of current
    const currentMinutes = Math.floor(currentTime / 60);

    let currentSeconds = Math.floor(currentTime % 60);
    if (currentSeconds < 10) {
      currentSeconds = `0${currentSeconds}`;
    }

    // delay switching elelemt to avoid NAN
    currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`;
  }
}


// set progress bar manually
function setProgressBar(e) {
  const width = this.clientWidth;
  const clickX = e.offsetX;
  const { duration } = music;
  music.currentTime = (clickX / width) * duration;
}

// event AudioListeners 
prevBttn.addEventListener('click', prevSong);
nextBttn.addEventListener('click', nextSong);
music.addEventListener('ended', nextSong);
music.addEventListener('timeupdate', updateProgressBar);
progressContainer.addEventListener('click', setProgressBar);