Please bookmark this page to avoid losing your image tool!

MP3 Song Player With Lyric Download Capability

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
function processImage(originalImg, songUrl = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", lyricsText = "[00:00.00] Welcome to the Web MP3 Player!\n[00:05.00] Enjoy the background track.\n[00:15.00] ♫♫♫\n[00:30.00] You can scroll down to read more.\n[00:45.00] Use the button below to download the lyrics file.") {
    
    // Create the main widget container
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.fontFamily = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
    container.style.backgroundColor = '#1a1a1a';
    container.style.color = '#ffffff';
    container.style.padding = '30px';
    container.style.borderRadius = '15px';
    container.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.7)';
    container.style.maxWidth = '360px';
    container.style.margin = '20px auto';
    container.style.boxSizing = 'border-box';

    // Set Album Cover
    const cover = document.createElement('img');
    if (originalImg instanceof HTMLCanvasElement) {
        cover.src = originalImg.toDataURL('image/png');
    } else {
        cover.src = originalImg.src;
    }
    
    cover.style.width = '300px';
    cover.style.height = '300px';
    cover.style.objectFit = 'cover';
    cover.style.borderRadius = '10px';
    cover.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.6)';
    cover.style.marginBottom = '25px';
    cover.style.transition = 'transform 0.3s ease';
    
    // Slight album art zoom effect on hover
    cover.onmouseover = () => cover.style.transform = 'scale(1.03)';
    cover.onmouseout = () => cover.style.transform = 'scale(1)';
    container.appendChild(cover);

    // Audio Element inside the widget
    const audio = document.createElement('audio');
    audio.controls = true;
    audio.src = songUrl;
    audio.style.width = '100%';
    audio.style.marginBottom = '20px';
    audio.style.outline = 'none';
    container.appendChild(audio);

    // Lyrics Display Area
    const lyricsContainer = document.createElement('div');
    lyricsContainer.style.width = '100%';
    lyricsContainer.style.height = '150px';
    lyricsContainer.style.overflowY = 'auto';
    lyricsContainer.style.backgroundColor = '#2a2a2a';
    lyricsContainer.style.borderRadius = '8px';
    lyricsContainer.style.padding = '15px';
    lyricsContainer.style.boxSizing = 'border-box';
    lyricsContainer.style.marginBottom = '20px';
    lyricsContainer.style.boxShadow = 'inset 0 4px 8px rgba(0, 0, 0, 0.3)';

    const lyricsTextEl = document.createElement('p');
    lyricsTextEl.innerText = lyricsText;
    lyricsTextEl.style.whiteSpace = 'pre-wrap';
    lyricsTextEl.style.margin = '0';
    lyricsTextEl.style.textAlign = 'center';
    lyricsTextEl.style.lineHeight = '1.8';
    lyricsTextEl.style.fontSize = '14px';
    lyricsTextEl.style.color = '#cccccc';
    lyricsContainer.appendChild(lyricsTextEl);
    container.appendChild(lyricsContainer);

    // Download Lyrics Component
    const downloadBtn = document.createElement('button');
    downloadBtn.innerText = 'Download Lyrics File';
    downloadBtn.style.padding = '12px 25px';
    downloadBtn.style.backgroundColor = '#1db954';
    downloadBtn.style.color = '#ffffff';
    downloadBtn.style.border = 'none';
    downloadBtn.style.borderRadius = '25px';
    downloadBtn.style.cursor = 'pointer';
    downloadBtn.style.fontSize = '15px';
    downloadBtn.style.fontWeight = 'bold';
    downloadBtn.style.transition = 'background-color 0.2s, transform 0.2s';
    
    // Button interactivty styling
    downloadBtn.onmouseover = () => {
        downloadBtn.style.backgroundColor = '#1ed760';
        downloadBtn.style.transform = 'scale(1.05)';
    };
    downloadBtn.onmouseout = () => {
        downloadBtn.style.backgroundColor = '#1db954';
        downloadBtn.style.transform = 'scale(1)';
    };
    downloadBtn.onmousedown = () => downloadBtn.style.transform = 'scale(0.95)';
    downloadBtn.onmouseup = () => downloadBtn.style.transform = 'scale(1.05)';

    // Trigger lyric blob download process
    downloadBtn.onclick = () => {
        const textBlob = new Blob([lyricsText], { type: 'text/plain' });
        const objUrl = URL.createObjectURL(textBlob);
        
        const link = document.createElement('a');
        link.href = objUrl;
        link.download = 'lyrics.lrc';
        
        document.body.appendChild(link);
        link.click();
        
        document.body.removeChild(link);
        URL.revokeObjectURL(objUrl);
    };

    container.appendChild(downloadBtn);

    return container;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

This tool allows users to create a custom MP3 music player widget that features album art, an audio playback interface, and a synchronized lyrics display area. Users can listen to tracks while reading the lyrics and have the option to download the lyrics as a .lrc file. This tool is ideal for musicians, bloggers, or web developers looking to enhance music-related content with an interactive and visually appealing player for their websites.

Leave a Reply

Your email address will not be published. Required fields are marked *