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 = [ 'Hear my Heart', 'Say yes','For You', 'My Love', 'Moon Lovers'];

// Keep track of songs
let songIndex = 2;

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

// Update song details
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.add('fa-play');
    playBtn.querySelector('i.fas').classList.remove('fa-pause');
    audio.pause();
}

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

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

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

    audio.currentTime = (clickX/width)* duration;
}


// Event Listeners
playBtn.addEventListener('click', ()=>{
    const isPlaying = musicContainer.classList.contains('play');
    if(isPlaying){
        pauseSong();
    }else{
        playSong();
    }
});

// Change Songs
prevBtn.addEventListener('click',prevSong);
nextBtn.addEventListener('click',nextSong);


// Time/Song Update Event
audio.addEventListener('timeupdate',updateProgress);

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

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