You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
audioUrl = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
title = "SoundHelix Track",
artist = "T. Schürger",
lyrics = "🎵 [Instrumental intro] 🎵\n\nThis is a sample audio player.\n\nYou can scroll through the lyrics here while listening to the music.\n\nThe image you provided is being used as the album artwork.\n\nEnjoy the tunes!"
) {
// Create the main wrapper container
const container = document.createElement("div");
container.style.cssText = `
display: flex;
flex-wrap: wrap;
gap: 25px;
background: linear-gradient(145deg, #1f2124, #121212);
color: #ffffff;
padding: 25px;
border-radius: 16px;
font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
box-sizing: border-box;
width: 100%;
max-width: 750px;
box-shadow: 0 15px 30px rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.05);
`;
// --- Left Panel: Album Art & Download Button ---
const leftPanel = document.createElement("div");
leftPanel.style.cssText = `
display: flex;
flex-direction: column;
align-items: center;
width: 220px;
flex-shrink: 0;
gap: 20px;
`;
// Canvas for Album Art (crop to square just like object-fit: cover)
const canvas = document.createElement("canvas");
const size = 220;
canvas.width = size;
canvas.height = size;
canvas.style.cssText = `
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.5);
`;
const ctx = canvas.getContext("2d");
// Calculate cropping to fit the canvas strictly as a square
const scale = Math.max(size / originalImg.width, size / originalImg.height);
const drawWidth = originalImg.width * scale;
const drawHeight = originalImg.height * scale;
const x = (size - drawWidth) / 2;
const y = (size - drawHeight) / 2;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, size, size);
ctx.drawImage(originalImg, x, y, drawWidth, drawHeight);
// Download Button
const downloadBtn = document.createElement("a");
downloadBtn.href = audioUrl;
downloadBtn.download = `${title.replace(/\s+/g, '_')}_Audio.mp3`;
downloadBtn.target = "_blank";
downloadBtn.innerHTML = `
<svg style="width: 16px; height: 16px; vertical-align: middle; margin-right: 6px;" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
Download MP3
`;
downloadBtn.style.cssText = `
background-color: #1db954;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
border-radius: 30px;
font-weight: 600;
font-size: 14px;
text-align: center;
width: 100%;
box-sizing: border-box;
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
`;
downloadBtn.onmouseover = () => {
downloadBtn.style.backgroundColor = "#1ed760";
downloadBtn.style.transform = "scale(1.03)";
};
downloadBtn.onmouseout = () => {
downloadBtn.style.backgroundColor = "#1db954";
downloadBtn.style.transform = "scale(1)";
};
leftPanel.appendChild(canvas);
leftPanel.appendChild(downloadBtn);
// --- Right Panel: Track Info, Audio Player, and Lyrics ---
const rightPanel = document.createElement("div");
rightPanel.style.cssText = `
display: flex;
flex-direction: column;
flex: 1;
min-width: 250px;
`;
// Track details
const titleEl = document.createElement("h2");
titleEl.textContent = title;
titleEl.style.cssText = "margin: 0 0 4px 0; font-size: 26px; font-weight: 800; letter-spacing: 0.5px;";
const artistEl = document.createElement("h4");
artistEl.textContent = artist;
artistEl.style.cssText = "margin: 0 0 20px 0; font-size: 16px; color: #a7a7a7; font-weight: 500;";
// HTML5 Audio element
const audioEl = document.createElement("audio");
audioEl.controls = true;
audioEl.src = audioUrl;
audioEl.style.cssText = `
width: 100%;
margin-bottom: 25px;
border-radius: 30px;
outline: none;
`;
// Lyrics Area
const lyricsLabel = document.createElement("div");
lyricsLabel.textContent = "Lyrics";
lyricsLabel.style.cssText = `
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 10px;
color: #777;
font-weight: 600;
`;
const lyricsBox = document.createElement("div");
lyricsBox.textContent = lyrics;
// Styling a neat scrollable box
lyricsBox.style.cssText = `
flex: 1;
background: rgba(255, 255, 255, 0.03);
padding: 20px;
border-radius: 10px;
font-size: 15px;
line-height: y;
line-height: 1.7;
white-space: pre-wrap;
overflow-y: auto;
max-height: 160px;
color: #cccccc;
border: 1px solid rgba(255,255,255,0.06);
box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
`;
// Style the scrollbar for webkit browsers for aesthetic purposes
const styleEl = document.createElement("style");
styleEl.textContent = `
.lyrics-scrollbar::-webkit-scrollbar {
width: 8px;
}
.lyrics-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.lyrics-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 10px;
}
.lyrics-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
`;
lyricsBox.classList.add("lyrics-scrollbar");
rightPanel.appendChild(titleEl);
rightPanel.appendChild(artistEl);
rightPanel.appendChild(audioEl);
rightPanel.appendChild(lyricsLabel);
rightPanel.appendChild(lyricsBox);
// Assemble the component
container.appendChild(styleEl);
container.appendChild(leftPanel);
container.appendChild(rightPanel);
return container;
}Apply Changes
