script.js

const musicContainer = document.getElementById("music-container");
const playBtn = document.getElementById("play");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");

const audio = document.getElementById("audio");
const progress = document.getElementById("progress");
const progressContainer = document.getElementById("progress-container");
const title = document.getElementById("title");
const cover = document.getElementById("cover");

// Song titles
const songs = ["hey", "summer", "ukulele"];

// Keep track of song
let songIndex = 2;

// Initially load song details into DOM
loadSong(songs[songIndex]);

// Update song detail
function loadSong(song) {
  title.innerText = song;
  audio.src = `music/${song}.mp3`;
  cover.src = `images/${song}.jpg`;
}

// Play song
function playSong() {
  musicContainer.classList.add("play");
  playBtn.querySelector("i.fas").classList.remove("fa-play");
  playBtn.querySelector("i.fas").classList.add("fa-pause");

  audio.play();
}

// Pause song
function pauseSong() {
  musicContainer.classList.remove("play");
  playBtn.querySelector("i.fas").classList.remove("fa-pause");
  playBtn.querySelector("i.fas").classList.add("fa-play");

  audio.pause();
}

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

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

// Update progress bar
function updateProgress(e) {
    const {duration, currentTime} = e.srcElement
    const progressPercent = (currentTime / duration)*100;
    progress.style.width = `${progressPercent}%`;
}

// Set progress bar
function setProgress(e) {
    const width = this.clientWidth; // get total width
    const clickX = e.offsetX; // get click position
    const duration = audio.duration;    // get audio duration

    audio.currentTime = (clickX / width) * duration; // set duration based on click
}

// Event listeners
playBtn.addEventListener("click", () => {
  const isPlaying = musicContainer.classList.contains("play");

  if (isPlaying) {
    pauseSong();
  } else {
    playSong();
  }
});

/* --- Change song --- */
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);

/* --- Time/song update --- */
audio.addEventListener('timeupdate', updateProgress);

/* --- Click on progress bar --- */
progressContainer.addEventListener('click',setProgress);

// Song ends
audio.addEventListener('ended', nextSong);