script.js

const image = document.querySelector('img')
// const image = document.getElementById('img')
const title = document.getElementById('title')
const artist = document.getElementById('artist')
const music = document.querySelector('audio')
const currentTimeEl = document.getElementById('current-time')
const durationEl = document.getElementById('duration')
const progress = document.getElementById('progress')
const progressContainer = document.getElementById('progress-container')
const prevBtn = document.getElementById('prev')
const playBtn = document.getElementById('play')
const nextBtn = document.getElementById('next')
const hora = document.getElementById('hora')
const body = document.querySelector('body')

const interval = setInterval(() => {
  const horaActual = new Date()
  hora.textContent = horaActual.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  })
}, 1000)

// music
const songs = [
  {
    name: 'music-1',
    displayName: 'Pumped Up Kicks',
    artist: 'Le Tongue',
    color: '#870101',
  },
  {
    name: 'music-2',
    displayName: 'Pirates/Game of Thrones',
    artist: 'Eshan Denipitiya & David Loke',
    color: '#935D28',
  },
  {
    name: 'music-3',
    displayName: 'Chandelier',
    artist: 'Twenty One Two',
    color: '#63786E',
  },
  {
    name: 'music-4',
    displayName: 'Pumped Up Kicks',
    artist: 'Ralph Saenz - John Murphy',
    color: '#EBDE8A',
  },
  {
    name: 'music-5',
    displayName: 'Wonderwall',
    artist: 'Twenty One Two',
    color: '#111111',
  },
]

// check if playing
let isPlaying = false

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

// pause
function pauseSong() {
  isPlaying = false
  playBtn.querySelector('i').classList.replace('fa-pause', 'fa-play')
  playBtn.setAttribute('title', 'Play')
  music.pause()
}

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

// Update DOM
function loadSong(song) {
  title.textContent = song.displayName
  artist.textContent = song.artist
  music.src = `music/${song.name}.mp3`
  image.src = `img/${song.name}.jpeg`
  document.body.style.background = `${song.color}`
}

// Current Song
let songIndex = 0

// Previous 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()
}

// On load - Select first song
loadSong(songs[songIndex])

// Update Progress Bar & Time
function updateProgressBar(e) {
  if (isPlaying) {
    const { duration, currentTime } = e.srcElement
    // Update progress bar width
    const progressPercent = (currentTime / duration) * 100
    progress.style.width = `${progressPercent}%`
    // Calculate display for duration
    const durationMinutes = Math.floor(duration / 60)
    let durationSeconds = Math.floor(duration % 60)
    if (durationSeconds < 10) {
      durationSeconds = `0${durationSeconds}`
    }
    // Delay switching duration Element to avoid NaN
    if (durationSeconds) {
      durationEl.textContent = `${durationMinutes}:${durationSeconds}`
    }
    // Calculate display for currentTime
    const currentMinutes = Math.floor(currentTime / 60)
    let currentSeconds = Math.floor(currentTime % 60)
    if (currentSeconds < 10) {
      currentSeconds = `0${currentSeconds}`
    }
    currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`
  }
}

// Set progress Bar
function setProgressBar(e) {
  const width = this.clientWidth
  const clickX = e.offsetX
  const { duration } = music
  music.currentTime = (clickX / width) * duration
}

// Event Listeners
prevBtn.addEventListener('click', prevSong)
nextBtn.addEventListener('click', nextSong)
music.addEventListener('ended', nextSong)
music.addEventListener('timeupdate', updateProgressBar)
progressContainer.addEventListener('click', setProgressBar)