musicPlayer.js

//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡀⠀⠀⠀⠀⠀⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⡿⠇⠀⠀⠀⠀⢻⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⡸⣞⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⢀⣧⢿⣽⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⢴⣿⠆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⣼⣞⡿⣞⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠓⢤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⠀⠀⠀⣰⣟⢾⣽⢫⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣠⢤⣶⡻⣞⣿⣺⢯⣽⣳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⢠⣄⡀⠀⠀⠀⠀⠙⢦⡀⠀⠀⠀⠀⣀⣠⣤⣿⣽⣻⢾⣽⣷⣾⣽⣻⣞⣷⣳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⣿⣶⣄⡀⠀⠀⠀⣉⣲⣴⢶⣞⡿⣽⣞⡷⣯⢿⡽⣞⣿⠟⠋⠁⠉⠈⠳⣟⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⣿⣿⢶⣾⣿⡽⣯⣟⡾⣽⡷⣯⣟⡽⡾⣽⡯⠁⠀⠀⠀⠀⠀⠀⢮⣭⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⢞⣿⣿⢯⡿⣿⣯⣟⣷⣯⢿⣳⣟⡷⣽⣼⣻⣽⠀⠀⠀⠀⠀⠀⠀⢀⣼⡯⡗⠋⠤⠀⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢾⣿⣿⣯⣽⣾⣿⣾⣗⡿⣯⡷⣯⣟⡷⣞⣼⣿⣀⠀⠀⠀⠀⢀⣠⡿⣏⡗⠈⠐⠈⠅⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣼⠛⠏⠉⠉⠽⢟⢿⣿⣿⣿⣿⣷⣻⢾⡽⣞⡷⠄⡹⣶⢿⣻⢿⣻⡽⢯⣼⢦⠶⠁⠈⠀⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⣯⠇⠀⠀⠀⠀⠀⠁⣽⣿⣿⣿⣷⣯⣿⣽⣛⡦⠀⠀⢩⣿⣹⢯⣷⢻⣟⠺⢣⡖⣘⠤⠓⠀⠀⠀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢈⣿⡃⠁⠀⠀⠀⢀⣤⣾⣟⢿⣻⣿⣿⣟⡾⣽⡳⠄⠎⢳⣯⢯⣟⡾⢯⣞⣯⣓⠉⢀⠀⠀⡄⢢⡀⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⣷⣷⣶⣳⣶⣺⣿⣿⣳⢯⣟⣿⣿⣳⢯⠛⠅⠃⠀⠀⣴⣿⡿⣬⢶⠾⠙⣊⣥⠾⡒⠊⢁⢠⠣⣌⠀⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢺⡽⣾⡽⣯⣟⣿⡿⣯⣿⣿⣾⢿⣿⠳⢏⣈⢠⠀⠀⣰⢿⡿⣽⣉⡶⠌⠋⠉⣀⡀⠁⠀⠀⠀⣘⡐⣂⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣽⣳⣟⣳⣟⣾⣽⣿⣿⣿⣿⣿⣦⣜⡻⡽⠆⠧⣴⡟⣯⢟⡳⣭⠲⠄⠐⠀⠀⠀⠈⠁⠉⠑⢊⡕⢃⠄⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣿⣾⣿⣯⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣾⢧⠀⠹⠾⡵⡞⡽⢢⣃⠐⠀⠀⠄⡐⠀⠀⠀⡘⢦⠘⣌⠀⠀
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠹⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢯⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠒⡈⠀⡀⠄⡑⠢⣉⠴⣈⣆
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢯⣏⡴⣶⣵⣢⢤⢠⡀⡄⢠⠐⡰⢌⡱⠀⡁⡀⠆⡥⠆⡥⣛⡽⣾
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠔⠉⠀⠀⢽⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣼⣻⢷⣯⡽⣞⣷⣻⡼⣡⢋⡔⠣⠜⡐⢐⠠⡓⣤⣙⣲⣽⣻⢷
//⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⡿⣽⣞⣷⣻⡴⣣⢜⡱⣊⡕⣊⠠⡙⡰⣭⢷⣯⣿⢿
//
// By THE 2e5d on discord

const playButton = document.getElementById('playBtn');
const previousButton = document.getElementById('prevBtn');
const nextButton = document.getElementById('nextBtn');
const progressBarElement = document.getElementById('progressBar');
const progressElement = document.getElementById('progress');
const currentTimeElement = document.getElementById('currentTime');
const totalTimeElement = document.getElementById('totalTime');
const songNameElement = document.getElementById('songName');
const albumArtElement = document.getElementById('art');

function initializeMusicPlayer() {
    playButton.addEventListener('click', togglePlayback);
    previousButton.addEventListener('click', () => { changeTrack(-1); });
    nextButton.addEventListener('click', () => { changeTrack(1); });
    
    progressBarElement.addEventListener('click', (event) => {
        if (isDragging) return;
        const barRect = progressBarElement.getBoundingClientRect();
        const clickPosition = event.clientX - barRect.left;
        const newProgress = (clickPosition / barRect.width) * 100;
        currentProgress = Math.max(0, Math.min(100, newProgress));
        progressElement.style.width = `${currentProgress}%`;
        updateTimeDisplay();
        
        if (audioElement && currentSongDuration > 0) {
            const newTime = (currentProgress / 100) * currentSongDuration;
            currentSeconds = newTime;
            if (audioElement) {
                audioElement.currentTime = currentSeconds;
            }
        }
    });
    
    progressBarElement.addEventListener('mousedown', startDrag);
    
    document.addEventListener('keydown', (event) => {
        if (event.code === 'Space') {
            event.preventDefault();
            togglePlayback();
        } else if (event.code === 'ArrowLeft') {
            changeTrack(-1);
        } else if (event.code === 'ArrowRight') {
            changeTrack(1);
        }
    });
}

function loadTrack(trackIndex) {
    currentTrackIndex = trackIndex;
    const track = config.musicPlayer.playlist[trackIndex];
    
    songNameElement.textContent = track.title;
    albumArtElement.style.backgroundImage = `url('${track.coverUrl}')`;
    
    currentProgress = 0;
    progressElement.style.width = '0%';
    currentSeconds = 0;
    currentSongDuration = 0;
    
    updateTimeDisplay();
    totalTimeElement.textContent = "0:00";
    
    if (audioElement) {
        audioElement.pause();
        audioElement = null;
    }
    
    audioElement = new Audio(track.audioUrl);
    
    audioElement.addEventListener('loadedmetadata', function() {
        currentSongDuration = audioElement.duration;
        const minutes = Math.floor(currentSongDuration / 60);
        const seconds = Math.floor(currentSongDuration % 60);
        totalTimeElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
    });
    
    audioElement.addEventListener('error', function() {
        console.error('Error loading audio:', track.audioUrl);
        totalTimeElement.textContent = "0:00";
    });
    
    if (isPlaying) {
        startPlayback();
    }
}

function changeTrack(direction) {
    let newTrackIndex = currentTrackIndex + direction;
    
    if (newTrackIndex < 0) {
        newTrackIndex = config.musicPlayer.playlist.length - 1;
    } else if (newTrackIndex >= config.musicPlayer.playlist.length) {
        newTrackIndex = 0;
    }
    
    loadTrack(newTrackIndex);
    
    if (isPlaying) {
        startPlayback();
    }
}

function togglePlayback() {
    isPlaying = !isPlaying;
    const playButtonSvg = playButton.querySelector('svg');
    
    if (isPlaying) {
        playButtonSvg.innerHTML = '<path fill="currentColor" d="M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2m6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2"/>';
        startPlayback();
    } else {
        playButtonSvg.innerHTML = '<path fill="currentColor" d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"/>';
        clearInterval(progressInterval);
        if (audioElement) {
            audioElement.pause();
        }
    }
}

function startPlayback() {
    clearInterval(progressInterval);
    
    if (audioElement) {
        audioElement.currentTime = currentSeconds;
        audioElement.play().catch(error => console.error('Playback error:', error));
    }
    
    progressInterval = setInterval(() => {
        if (!isPlaying || isDragging || !audioElement) return;
        
        if (audioElement.readyState >= 2) {
            currentSeconds = audioElement.currentTime;
            if (currentSongDuration > 0) {
                currentProgress = (currentSeconds / currentSongDuration) * 100;
                
                if (currentProgress >= 100) {
                    changeTrack(1);
                } else {
                    progressElement.style.width = `${currentProgress}%`;
                    updateTimeDisplay();
                }
            } else {
                progressElement.style.width = '0%';
                updateTimeDisplay();
            }
        }
    }, 500);
}

function updateTimeDisplay() {
    if (currentSongDuration > 0) {
        const currentTimeInSeconds = Math.floor((currentProgress / 100) * currentSongDuration);
        const minutes = Math.floor(currentTimeInSeconds / 60);
        const seconds = currentTimeInSeconds % 60;
        currentTimeElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
    } else {
        currentTimeElement.textContent = "0:00";
    }
}

function startDrag(event) {
    isDragging = true;
    event.preventDefault();
    
    function updateDragPosition(moveEvent) {
        if (!isDragging) return;
        const barRect = progressBarElement.getBoundingClientRect();
        const dragPosition = Math.max(0, Math.min(barRect.width, moveEvent.clientX - barRect.left));
        const newProgress = (dragPosition / barRect.width) * 100;
        currentProgress = Math.max(0, Math.min(100, newProgress));
        progressElement.style.width = `${currentProgress}%`;
        
        if (currentSongDuration > 0) {
            currentSeconds = (currentProgress / 100) * currentSongDuration;
            updateTimeDisplay();
            
            if (audioElement) {
                audioElement.currentTime = currentSeconds;
            }
        }
    }
    
    updateDragPosition(event);
    
    function onMouseMove(event) { updateDragPosition(event); }
    function stopDrag() { 
        isDragging = false; 
        document.removeEventListener('mousemove', onMouseMove); 
        document.removeEventListener('mouseup', stopDrag); 
    }
    
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', stopDrag);
}