script.js

let currentSong = new Audio();
let songs;
let playingSongs;
let currentIndex = 0;

function formatTime(seconds) {
    let minutes = Math.floor(seconds / 60);
    let secs = Math.floor(seconds % 60);
    if (secs < 10) secs = "0" + secs;
    return minutes + ":" + secs;
}

async function getSongs(folder) {
    try {
        const response = await fetch("songs/songs.json");
        const data = await response.json();
        songs = data[folder];

        const songul = document.querySelector(".songlist ul");
        songul.innerHTML = "";
        // show songs in the li
        for (const song of songs) {
            const songName = song.split("/").pop().replace(".mp3", "");
            songul.innerHTML += `
                <li data-track="${song}">
                    <img class="invert" src="img/music.svg">
                    <div class="info">${decodeURIComponent(songName)}</div>
                    <img src="img/mplay.svg">
                </li>`;
        }

        songul.onclick = function (e) {
            const li = e.target.closest("li");
            if (!li) return;
            const track = li.dataset.track;
            if (track) {
                playMusic(track);
                document.querySelector(".btnplay").src = "img/pause.svg";
            }
        };

    } catch (err) {
        console.error("Error loading songs:", err);
    }
}

const playMusic = (track, pause = false) => {
    currentSong.src = track;
    currentIndex = songs.indexOf(track);
    playingSongs = songs;
    if (!pause) currentSong.play().catch(() => { });

    const songName = track.split("/").pop().replace(".mp3", "");
    document.querySelector(".songinfo").innerHTML = decodeURIComponent(songName);
    document.querySelector(".songtime").innerHTML = "00:00 / 00:00";
};

async function main() {
    await getSongs("coke");
    playMusic(songs[0], true);

// change the play and pause svg when clicked

    const play = document.querySelector(".btnplay");

    play.addEventListener("click", () => {
        if (currentSong.paused) {
            currentSong.play().catch(() => { });
            play.src = "img/pause.svg";
        } else {
            currentSong.pause();
            play.src = "img/btnplay.svg";
        }
    });

    //change the time while song is playing

    currentSong.addEventListener("timeupdate", () => {
        if (!isNaN(currentSong.duration)) {
            document.querySelector(".songtime").innerHTML =
                `${formatTime(currentSong.currentTime)} / ${formatTime(currentSong.duration)}`;
            document.querySelector(".circle").style.left =
                (currentSong.currentTime / currentSong.duration) * 100 + "%";
        }
    });

    document.querySelector(".seekbar").addEventListener("click", e => {
        const percent = (e.offsetX / e.target.getBoundingClientRect().width) * 100;
        document.querySelector(".circle").style.left = percent + "%";
        currentSong.currentTime = (currentSong.duration * percent) / 100;
    });

    document.querySelector(".ham").addEventListener("click", () => {
        document.querySelector(".left").style.left = "0";
    });

    document.querySelector(".close").addEventListener("click", () => {
        document.querySelector(".left").style.left = "-100%";
    });

    //add eventlistener to prev and next button

    document.querySelector(".prev").addEventListener("click", () => {
        if (currentIndex > 0) {
            songs = playingSongs;
            playMusic(playingSongs[currentIndex - 1]);
            play.src = "img/pause.svg";
        }
    });

    document.querySelector(".next").addEventListener("click", () => {
        if (currentIndex < playingSongs.length - 1) {
            songs = playingSongs;
            playMusic(playingSongs[currentIndex + 1]);
            play.src = "img/pause.svg";
        }
    });

    document.querySelector(".inp").addEventListener("change", (e) => {
        currentSong.volume = parseInt(e.target.value) / 100;
    });

    Array.from(document.getElementsByClassName("card")).forEach(card => {
        card.addEventListener("click", async () => {
            const folderKey = card.dataset.folder;
            await getSongs(folderKey);
            // no autoplay — current song keeps playing
            document.querySelector(".left").style.left = "0";
        });
    });

    document.querySelector(".volume>img").addEventListener("click", e => {
        if (e.target.src.includes("img/volume.svg")) {
            e.target.src = e.target.src.replace("img/volume.svg", "img/mute.svg");
            currentSong.volume = 0;
            document.querySelector(".volume input").value = 0;
        } else {
            e.target.src = e.target.src.replace("img/mute.svg", "img/volume.svg");
            currentSong.volume = 0.20;
            document.querySelector(".volume input").value = 10;
        }
    });

    document.querySelector(".inp").addEventListener("click", () => {
        document.querySelector(".volume>img").src = "img/volume.svg";
    });
}

main();