You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
title = "Unknown Song",
artist = "Unknown Artist",
mediaUrl = "data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA=",
lyricsText = "🎵 Playing...\n\n[00:00] Intro\n[00:10] Verse 1\n[00:20] Chorus",
bgColor = "#1e1e2f",
textColor = "#ffffff",
accentColor = "#1db954"
) {
// Create the main container div
const container = document.createElement('div');
container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
container.style.backgroundColor = bgColor;
container.style.color = textColor;
container.style.padding = "25px";
container.style.borderRadius = "16px";
container.style.boxShadow = "0 8px 30px rgba(0, 0, 0, 0.4)";
container.style.maxWidth = "350px";
container.style.width = "100%";
container.style.margin = "0 auto";
container.style.display = "flex";
container.style.flexDirection = "column";
container.style.alignItems = "center";
container.style.gap = "15px";
container.style.boxSizing = "border-box";
// Create the cover image wrapper (for CD/Vinyl effect)
const coverWrapper = document.createElement('div');
coverWrapper.style.width = "180px";
coverWrapper.style.height = "180px";
coverWrapper.style.borderRadius = "50%";
coverWrapper.style.overflow = "hidden";
coverWrapper.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.5)";
coverWrapper.style.position = "relative";
coverWrapper.style.backgroundColor = "#000";
// Inner hole to make it look like a vinyl/CD
const coverHole = document.createElement('div');
coverHole.style.position = "absolute";
coverHole.style.top = "50%";
coverHole.style.left = "50%";
coverHole.style.transform = "translate(-50%, -50%)";
coverHole.style.width = "40px";
coverHole.style.height = "40px";
coverHole.style.backgroundColor = bgColor;
coverHole.style.borderRadius = "50%";
coverHole.style.zIndex = "2";
coverHole.style.boxShadow = "inset 0 2px 5px rgba(0,0,0,0.5)";
// Output the provided originalImage as the cover
const coverImg = document.createElement('img');
coverImg.src = originalImg.src;
coverImg.style.width = "100%";
coverImg.style.height = "100%";
coverImg.style.objectFit = "cover";
coverImg.style.display = "block";
coverImg.style.zIndex = "1";
coverWrapper.appendChild(coverImg);
coverWrapper.appendChild(coverHole);
// Set up Web Animations API to spin the cover
const spinAnimation = coverImg.animate([
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(360deg)' }
], {
duration: 8000,
iterations: Infinity
});
spinAnimation.pause(); // Initially paused
// Text details (Title & Artist)
const textContainer = document.createElement('div');
textContainer.style.textAlign = "center";
textContainer.style.width = "100%";
const titleEl = document.createElement('h2');
titleEl.textContent = title;
titleEl.style.margin = "0 0 5px 0";
titleEl.style.fontSize = "22px";
titleEl.style.fontWeight = "700";
titleEl.style.whiteSpace = "nowrap";
titleEl.style.overflow = "hidden";
titleEl.style.textOverflow = "ellipsis";
const artistEl = document.createElement('p');
artistEl.textContent = artist;
artistEl.style.margin = "0";
artistEl.style.fontSize = "14px";
artistEl.style.color = "rgba(255, 255, 255, 0.7)";
textContainer.appendChild(titleEl);
textContainer.appendChild(artistEl);
// Audio Player controls
const audioPlayer = document.createElement('audio');
audioPlayer.controls = true;
audioPlayer.src = mediaUrl;
audioPlayer.style.width = "100%";
audioPlayer.style.outline = "none";
// Play/Pause events to trigger the spinning album cover animation
audioPlayer.addEventListener('play', () => spinAnimation.play());
audioPlayer.addEventListener('pause', () => spinAnimation.pause());
audioPlayer.addEventListener('ended', () => spinAnimation.pause());
// Lyrics Display Area
const lyricsBox = document.createElement('div');
lyricsBox.style.width = "100%";
lyricsBox.style.height = "120px";
lyricsBox.style.overflowY = "auto";
lyricsBox.style.backgroundColor = "rgba(0, 0, 0, 0.25)";
lyricsBox.style.borderRadius = "8px";
lyricsBox.style.padding = "10px";
lyricsBox.style.boxSizing = "border-box";
lyricsBox.style.fontSize = "13px";
lyricsBox.style.lineHeight = "1.6";
lyricsBox.style.textAlign = "center";
lyricsBox.style.whiteSpace = "pre-wrap"; // Respect newlines in string
lyricsBox.textContent = lyricsText;
// Scrollbar styling for lyrics box
lyricsBox.style.scrollbarWidth = "thin";
lyricsBox.style.scrollbarColor = `${accentColor} transparent`;
// Download Button
const downloadBtn = document.createElement('a');
downloadBtn.href = mediaUrl;
downloadBtn.download = `${title.replace(/\s+/g, '_')}_Audio.mp3`;
downloadBtn.textContent = "⬇ Download MP3";
downloadBtn.style.display = "inline-flex";
downloadBtn.style.alignItems = "center";
downloadBtn.style.justifyContent = "center";
downloadBtn.style.padding = "12px 24px";
downloadBtn.style.backgroundColor = accentColor;
downloadBtn.style.color = "#ffffff";
downloadBtn.style.textDecoration = "none";
downloadBtn.style.borderRadius = "24px";
downloadBtn.style.fontWeight = "bold";
downloadBtn.style.fontSize = "14px";
downloadBtn.style.marginTop = "5px";
downloadBtn.style.transition = "transform 0.2s, opacity 0.2s";
downloadBtn.style.cursor = "pointer";
// Download Button Hover effects
downloadBtn.addEventListener('mouseenter', () => downloadBtn.style.opacity = "0.85");
downloadBtn.addEventListener('mouseleave', () => downloadBtn.style.opacity = "1");
downloadBtn.addEventListener('mousedown', () => downloadBtn.style.transform = "scale(0.95)");
downloadBtn.addEventListener('mouseup', () => downloadBtn.style.transform = "scale(1)");
// Assemble components into main container
container.appendChild(coverWrapper);
container.appendChild(textContainer);
container.appendChild(audioPlayer);
container.appendChild(lyricsBox);
container.appendChild(downloadBtn);
return container;
}Apply Changes
