Song Lyric MP3 Player And Downloader

function processImage(
    originalImg, 
    songTitle = "Night Runner", 
    artistName = "Synthwave Architect", 
    audioUrl = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", 
    lyrics = "In the rhythm of the night,\nwe are the shadows burning bright.\n\n(Chorus)\nOh, hear the sound, feel the beat,\nEchoing down the neon street.\n\nTake my hand, don't let it go,\nWe'll ride the wave and steal the show."
) {
    // Create the main player container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.width = '100%';
    container.style.maxWidth = '450px';
    container.style.margin = '20px auto';
    container.style.backgroundColor = '#1e1e2f';
    container.style.color = '#ffffff';
    container.style.borderRadius = '16px';
    container.style.overflow = 'hidden';
    container.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.4)';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.padding = '30px';
    container.style.boxSizing = 'border-box';

    // Album Art Container
    const imgContainer = document.createElement('div');
    imgContainer.style.width = '180px';
    imgContainer.style.height = '180px';
    imgContainer.style.borderRadius = '50%';
    imgContainer.style.overflow = 'hidden';
    imgContainer.style.marginBottom = '20px';
    imgContainer.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.6)';
    imgContainer.style.border = '4px solid #3a3a5a';

    const cloneImg = new Image();
    
    // Attempt drawing into canvas first to prevent broken links if original image was an ephemeral blob/URL
    try {
        const cvs = document.createElement('canvas');
        cvs.width = originalImg.naturalWidth || originalImg.width || 500;
        cvs.height = originalImg.naturalHeight || originalImg.height || 500;
        const ctx = cvs.getContext('2d');
        ctx.drawImage(originalImg, 0, 0, cvs.width, cvs.height);
        cloneImg.src = cvs.toDataURL('image/png');
    } catch (e) {
        // Fallback if canvas is tainted by cross-origin data
        cloneImg.src = originalImg.src;
    }

    cloneImg.style.width = '100%';
    cloneImg.style.height = '100%';
    cloneImg.style.objectFit = 'cover';
    imgContainer.appendChild(cloneImg);

    // Song Information
    const titleEl = document.createElement('h2');
    titleEl.textContent = songTitle;
    titleEl.style.margin = '0 0 8px 0';
    titleEl.style.fontSize = '24px';
    titleEl.style.fontWeight = '700';
    titleEl.style.textAlign = 'center';
    titleEl.style.letterSpacing = '0.5px';

    const artistEl = document.createElement('p');
    artistEl.textContent = artistName;
    artistEl.style.margin = '0 0 25px 0';
    artistEl.style.fontSize = '16px';
    artistEl.style.color = '#a0a0c0';
    artistEl.style.textAlign = 'center';

    // Audio Player Element
    const audioEl = document.createElement('audio');
    audioEl.controls = true;
    audioEl.src = audioUrl;
    audioEl.style.width = '100%';
    audioEl.style.marginBottom = '25px';
    audioEl.style.outline = 'none';

    // Lyrics Container
    const lyricsContainer = document.createElement('div');
    lyricsContainer.style.width = '100%';
    lyricsContainer.style.height = '160px';
    lyricsContainer.style.overflowY = 'auto';
    lyricsContainer.style.backgroundColor = '#141420';
    lyricsContainer.style.borderRadius = '10px';
    lyricsContainer.style.padding = '15px';
    lyricsContainer.style.boxSizing = 'border-box';
    lyricsContainer.style.marginBottom = '25px';
    lyricsContainer.style.whiteSpace = 'pre-wrap';
    lyricsContainer.style.textAlign = 'center';
    lyricsContainer.style.lineHeight = '1.8';
    lyricsContainer.style.fontSize = '15px';
    lyricsContainer.style.color = '#d0d0e0';
    lyricsContainer.style.boxShadow = 'inset 0 2px 10px rgba(0,0,0,0.5)';
    lyricsContainer.textContent = lyrics;

    // Custom Scrollbar styling for lyrics (using inline tags for cross-compatibility)
    const styleBlock = document.createElement('style');
    styleBlock.textContent = `
        .lyrics-scroll::-webkit-scrollbar { width: 6px; }
        .lyrics-scroll::-webkit-scrollbar-track { background: transparent; }
        .lyrics-scroll::-webkit-scrollbar-thumb { background-color: #3a3a5a; border-radius: 10px; }
    `;
    container.appendChild(styleBlock);
    lyricsContainer.classList.add('lyrics-scroll');

    // Download Button
    const downloadBtn = document.createElement('a');
    downloadBtn.href = audioUrl;
    
    // Determine file extension or default to .mp3
    const fileExt = audioUrl.split('.').pop().toLowerCase();
    const validExts = ['mp3', 'wav', 'ogg', 'aac', 'flac'];
    const ext = validExts.includes(fileExt) ? fileExt : 'mp3';
    
    downloadBtn.download = `${artistName} - ${songTitle}.${ext}`;
    downloadBtn.textContent = 'Download MP3';
    
    downloadBtn.style.display = 'block';
    downloadBtn.style.width = '100%';
    downloadBtn.style.padding = '14px 0';
    downloadBtn.style.textAlign = 'center';
    downloadBtn.style.backgroundColor = '#6c5ce7';
    downloadBtn.style.color = '#ffffff';
    downloadBtn.style.textDecoration = 'none';
    downloadBtn.style.borderRadius = '30px';
    downloadBtn.style.fontSize = '16px';
    downloadBtn.style.fontWeight = 'bold';
    downloadBtn.style.transition = 'background-color 0.3s ease, transform 0.1s ease';
    downloadBtn.style.boxSizing = 'border-box';
    
    // Button Hover Effects
    downloadBtn.onmouseover = () => {
        downloadBtn.style.backgroundColor = '#5f4cd6';
    };
    downloadBtn.onmouseout = () => {
        downloadBtn.style.backgroundColor = '#6c5ce7';
    };
    downloadBtn.onmousedown = () => {
        downloadBtn.style.transform = 'scale(0.97)';
    };
    downloadBtn.onmouseup = () => {
        downloadBtn.style.transform = 'scale(1)';
    };

    // Spin animation logic tied to Audio Play status
    let spinAngle = 0;
    let spinInterval = null;

    const startSpin = () => {
        if (!spinInterval) {
            spinInterval = setInterval(() => {
                spinAngle += 1;
                imgContainer.style.transform = `rotate(${spinAngle}deg)`;
            }, 30);
        }
    };

    const stopSpin = () => {
        if (spinInterval) {
            clearInterval(spinInterval);
            spinInterval = null;
        }
    };

    audioEl.addEventListener('play', startSpin);
    audioEl.addEventListener('pause', stopSpin);
    audioEl.addEventListener('ended', stopSpin);

    // Assemble the container elements
    container.appendChild(imgContainer);
    container.appendChild(titleEl);
    container.appendChild(artistEl);
    container.appendChild(audioEl);
    container.appendChild(lyricsContainer);
    container.appendChild(downloadBtn);

    return container;
}