script.js

/*==================================================
                BLUE SPOTIFY PLAYER
==================================================*/

/*==========================
        SONG DATA
==========================*/

const songs = [
    {
        id: 0,
        title: "告诉你我多想你",
        artist: "王子明",
        album: "Single",
        file: "music/baihat1.mp3",
        cover: "image/1.jpg"
    },
    {
        id: 1,
        title: "Fireworks Festival",
        artist: "Radwimps",
        album: "Weathering With You",
        file: "music/baihat2.mp3",
        cover: "image/2.jpg"
    },
    {
        id: 2,
        title: "Golden Hour",
        artist: "JVKE",
        album: "This Is What ___ Feels Like",
        file: "music/baihat3.mp3",
        cover: "image/3.jpg"
    },
    {
        id: 3,
        title: "Có thể hay không",
        artist: "Trương Tử Hào",
        album: "Single",
        file: "music/baihat4.mp3",
        cover: "image/4.jpg"
    },
    {
        id: 4,
        title: "Cơn mưa khi ấy",
        artist: "Từ Lương",
        album: "Single",
        file: "music/baihat5.mp3",
        cover: "image/5.jpg"
    },
    {
        id: 5,
        title: "Love Scenario",
        artist: "iKON",
        album: "Single",
        file: "music/baihat6.mp3",
        cover: "image/6.jpg"
    },
        {
        id: 6,
        title: "YÊU 5",
        artist: "Rhymastic",
        album: "Single",
        file: "music/baihat7.mp3",
        cover: "image/7.jpg"
    },
    {
         id: 7,
        title: "Eclipse",
        artist: "CR3",
        album: "Single",
        file: "music/baihat8.mp3",
        cover: "image/8.jpg"
    },
    {
        id: 8,
        title: "至若春和景明",
        artist: "沈卿Senki",
        album: "Single",
        file: "music/baihat9.mp3",
        cover: "image/9.jpg"
    },
    {
        id: 9,
        title: "Cô gái tháng hạ",
        artist: "Obito",
        album: "Single",
        file: "music/baihat10.mp3",
        cover: "image/10.jpg"
    },
    {
        id: 10,
        title: "Mắt biếc",
        artist: "TayNguyenSound",
        album: "Single",
        file: "music/baihat11.mp3",
        cover: "image/11.jpg"
    },
    {
         id: 11,
        title: "Những lời hứa bỏ quên",
        artist: "Vũ",
        album: "Single",
        file: "music/baihat12.mp3",
        cover: "image/12.jpg"
    },
    {
         id: 12,
        title: "Shadow of the Sun",
        artist: "Max Elto",
        album: "Single",
        file: "music/baihat13.mp3",
        cover: "image/13.jpg"
    },
    {
         id: 13,
        title: "Hạ đỏ",
        artist: "TayNguyenSound",
        album: "Single",
        file: "music/baihat14.mp3",
        cover: "image/14.jpg"
    },
    {
         id: 14,
        title: "Cho tôi lang thang",
        artist: "Đen-Ngọt",
        album: "Single",
        file: "music/baihat15.mp3",
        cover: "image/15.jpg"
    }

    
];

/*==========================
        DOM
==========================*/

const audio = document.getElementById("audio");

const songList = document.getElementById("songList");

const search = document.getElementById("search");

const playBtn = document.getElementById("play");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");

const progress = document.getElementById("progress");

const volume = document.getElementById("volume");

const coverImage = document.getElementById("coverImage");

const currentSong = document.getElementById("currentSong");

const artist = document.getElementById("artist");

const album = document.getElementById("album");

const miniCover = document.getElementById("miniCover");

const footerSong = document.getElementById("footerSong");

const footerArtist = document.getElementById("footerArtist");

const currentTime = document.getElementById("currentTime");

const totalTime = document.getElementById("totalTime");

const shuffleBtn = document.getElementById("shuffle");

const repeatBtn = document.getElementById("repeat");

const favoriteBtn = document.getElementById("favorite");

/*==========================
        STATE
==========================*/

let currentIndex = 0;

let isPlaying = false;

let isShuffle = false;

let repeatMode = 0;

/*
0 = off
1 = repeat all
2 = repeat one
*/

let favorites =
JSON.parse(localStorage.getItem("favorites")) || [];

/*==========================
        UTILS
==========================*/

function formatTime(seconds){

    if(isNaN(seconds)) return "00:00";

    const m = Math.floor(seconds / 60);

    const s = Math.floor(seconds % 60);

    return `${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;

}

function saveFavorite(){

    localStorage.setItem(
        "favorites",
        JSON.stringify(favorites)
    );

}
/*==========================
        RENDER
==========================*/

function renderSongs(keyword = "") {

    songList.innerHTML = "";

    const list = songs.filter(song =>

        song.title.toLowerCase().includes(keyword.toLowerCase()) ||

        song.artist.toLowerCase().includes(keyword.toLowerCase())

    );

    list.forEach(song => {

        const item = document.createElement("div");

        item.className = "song";

        item.dataset.id = song.id;

        if(song.id === currentIndex){

            item.classList.add("playing");

        }

        item.innerHTML = `

            <img src="${song.cover}">

            <div class="song-info">

                <div class="song-title">${song.title}</div>

                <div class="song-artist">${song.artist}</div>

            </div>

        `;

        item.addEventListener("click",()=>{

            playSong(song.id);

        });

        songList.appendChild(item);

    });

}

/*==========================
        LOAD SONG
==========================*/

function loadSong(index){

    currentIndex = index;

    const song = songs[index];

    audio.src = song.file;

    coverImage.src = song.cover;

    miniCover.src = song.cover;

    currentSong.textContent = song.title;

    footerSong.textContent = song.title;

    artist.textContent = song.artist;

    footerArtist.textContent = song.artist;

    album.textContent = song.album;

    progress.value = 0;

    currentTime.textContent = "00:00";

    highlightSong();

    updateFavorite();

}

/*==========================
        PLAY
==========================*/

function playSong(index){

    loadSong(index);

    audio.play();

    isPlaying = true;

    playBtn.innerHTML =
    '<i class="fa-solid fa-pause"></i>';

    coverImage.classList.add("spin");

}

/*==========================
        PAUSE
==========================*/

function pauseSong(){

    audio.pause();

    isPlaying = false;

    playBtn.innerHTML =
    '<i class="fa-solid fa-play"></i>';

    coverImage.classList.remove("spin");

}

/*==========================
        TOGGLE
==========================*/

function togglePlay(){

    if(!audio.src) return;

    if(isPlaying){

        pauseSong();

    }

    else{

        audio.play();

        isPlaying = true;

        playBtn.innerHTML =
        '<i class="fa-solid fa-pause"></i>';

        coverImage.classList.add("spin");

    }

}

/*==========================
        NEXT
==========================*/

function nextSong(){

    if(isShuffle){

        currentIndex =
        Math.floor(Math.random()*songs.length);

    }

    else{

        currentIndex++;

        if(currentIndex>=songs.length){

            currentIndex=0;

        }

    }

    playSong(currentIndex);

}

/*==========================
        PREVIOUS
==========================*/

function prevSong(){

    currentIndex--;

    if(currentIndex<0){

        currentIndex=songs.length-1;

    }

    playSong(currentIndex);

}

/*==========================
        HIGHLIGHT
==========================*/

function highlightSong(){

    document.querySelectorAll(".song").forEach(item=>{

        item.classList.remove("playing");

    });

    const active = document.querySelector(

        `.song[data-id="${currentIndex}"]`

    );

    if(active){

        active.classList.add("playing");

    }

}
/*==========================
        PROGRESS
==========================*/

audio.addEventListener("loadedmetadata", () => {

    totalTime.textContent = formatTime(audio.duration);

});

audio.addEventListener("timeupdate", () => {

    if (!audio.duration) return;

    progress.value =
        (audio.currentTime / audio.duration) * 100;

    currentTime.textContent =
        formatTime(audio.currentTime);

});

progress.addEventListener("input", () => {

    if (!audio.duration) return;

    audio.currentTime =
        (progress.value / 100) * audio.duration;

});

/*==========================
        VOLUME
==========================*/

audio.volume = 1;

volume.value = 100;

volume.addEventListener("input", () => {

    audio.volume = volume.value / 100;

});

/*==========================
        SEARCH
==========================*/

search.addEventListener("input", () => {

    renderSongs(search.value);

});

/*==========================
        PLAYER BUTTONS
==========================*/

playBtn.addEventListener("click", togglePlay);

nextBtn.addEventListener("click", nextSong);

prevBtn.addEventListener("click", prevSong);

/*==========================
        AUTO NEXT
==========================*/

audio.addEventListener("ended", () => {

    if (repeatMode === 2) {

        playSong(currentIndex);

        return;

    }

    nextSong();

});

/*==========================
        KEYBOARD
==========================*/

document.addEventListener("keydown", (e) => {

    if (e.target.tagName === "INPUT") return;

    switch (e.code) {

        case "Space":

            e.preventDefault();

            togglePlay();

            break;

        case "ArrowRight":

            nextSong();

            break;

        case "ArrowLeft":

            prevSong();

            break;

    }

});
/*==========================
        SHUFFLE
==========================*/

shuffleBtn.addEventListener("click", () => {

    isShuffle = !isShuffle;

    if(isShuffle){

    shuffleBtn.classList.add("active");

}
    else{

    shuffleBtn.classList.remove("active");

}

});

/*==========================
        REPEAT
==========================*/

repeatBtn.addEventListener("click",()=>{

    repeatMode++;

    if(repeatMode>2){

        repeatMode=0;

    }

    if(repeatMode===0){

        repeatBtn.classList.remove("active");

        repeatBtn.innerHTML='<i class="fa-solid fa-repeat"></i>';

    }

    else if(repeatMode===1){

        repeatBtn.classList.add("active");

        repeatBtn.innerHTML='<i class="fa-solid fa-repeat"></i>';

    }

    else{

        repeatBtn.classList.add("active");

        repeatBtn.innerHTML='<i class="fa-solid fa-repeat-1"></i>';

    }

});

/*==========================
        FAVORITE
==========================*/

function updateFavorite(){

    if(!favoriteBtn) return;

    if(favorites.includes(currentIndex)){

        favoriteBtn.classList.add("active");

        favoriteBtn.innerHTML='<i class="fa-solid fa-heart"></i>';

    }

    else{

        favoriteBtn.classList.remove("active");

        favoriteBtn.innerHTML='<i class="fa-regular fa-heart"></i>';

    }

}
if(favoriteBtn){

    favoriteBtn.addEventListener("click",()=>{

        if(favorites.includes(currentIndex)){

            favorites =
            favorites.filter(id=>id!==currentIndex);

        }

        else{

            favorites.push(currentIndex);

        }

        saveFavorite();

        updateFavorite();

    });

}

/*==========================
        INIT
==========================*/

function init(){

    renderSongs();

    loadSong(0);

    audio.volume = 1;

    volume.value = 100;

}

init();
/*==================================================
                FINAL OPTIMIZATION
==================================================*/

/*==========================
    SCROLL TO ACTIVE SONG
==========================*/

function scrollToActiveSong() {

    const activeSong = document.querySelector(".song.playing");

    if (!activeSong) return;

    activeSong.scrollIntoView({

        behavior: "smooth",

        block: "nearest"

    });

}

/*==========================
    UPDATE UI
==========================*/

function refreshUI() {

    highlightSong();

    updateFavorite();

    scrollToActiveSong();

}

/*==========================
    OVERRIDE LOAD SONG
==========================*/

const oldLoadSong = loadSong;

loadSong = function(index){

    oldLoadSong(index);

    refreshUI();

};

/*==========================
    BETTER SHUFFLE
==========================*/

function randomSong(){

    if(songs.length <= 1){

        return currentIndex;

    }

    let random;

    do{

        random = Math.floor(Math.random()*songs.length);

    }

    while(random === currentIndex);

    return random;

}

/*==========================
    OVERRIDE NEXT
==========================*/

nextSong = function(){

    if(isShuffle){

        playSong(randomSong());

        return;

    }

    currentIndex++;

    if(currentIndex >= songs.length){

        if(repeatMode === 0){

            currentIndex = 0;

        }

        else{

            currentIndex = 0;

        }

    }

    playSong(currentIndex);

};

/*==========================
    SEARCH EMPTY
==========================*/

const oldRenderSongs = renderSongs;

renderSongs = function(keyword=""){

    oldRenderSongs(keyword);

    if(songList.children.length===0){

        songList.innerHTML=

        `

        <div style="

            text-align:center;

            padding:60px;

            color:#aaa;

            font-size:18px;

        ">

            Không tìm thấy bài hát

        </div>

        `;

    }

};

/*==========================
    SPACEBAR FIX
==========================*/

document.addEventListener("keydown",(e)=>{

    if(

        e.target.tagName==="INPUT" ||

        e.target.tagName==="TEXTAREA"

    ) return;

    if(e.code==="Space"){

        e.preventDefault();

    }

});

/*==========================
    LOAD FIRST SONG
==========================*/

window.addEventListener("load",()=>{

    renderSongs();

    loadSong(0);

});

/*==========================
    END
==========================*/

console.log("Blue Spotify Ready");