You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
audioUrl = "https://upload.wikimedia.org/wikipedia/commons/b/b5/A-C_Chord.ogg",
songTitle = "Sample Track",
artistName = "Unknown Artist",
lyricText = "[00:00.00] ♪ Music Starts ♪\n[00:01.00] Syncing lyrics to track...\n[00:02.00] Playing the audio\n[00:03.00] Almost over\n[00:04.00] ♪ End ♪"
) {
// Main Container
const container = document.createElement('div');
container.style.width = "100%";
container.style.maxWidth = "380px";
container.style.display = "flex";
container.style.flexDirection = "column";
container.style.alignItems = "center";
container.style.background = "linear-gradient(145deg, #2b2e33, #151618)";
container.style.padding = "30px 20px";
container.style.borderRadius = "24px";
container.style.boxShadow = "0 12px 35px rgba(0,0,0,0.6), inset 0 1px 3px rgba(255,255,255,0.1)";
container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
container.style.boxSizing = "border-box";
container.style.margin = "0 auto";
container.style.color = "#ffffff";
// Global Styles for Animation & Scrollbars
const style = document.createElement('style');
style.textContent = `
@keyframes music-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.music-player-lyrics::-webkit-scrollbar {
width: 4px;
}
.music-player-lyrics::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.15);
border-radius: 4px;
}
.music-player-audio::-webkit-media-controls-panel {
background-color: rgba(255,255,255,0.1);
border-radius: 12px;
}
.music-player-audio::-webkit-media-controls-current-time-display,
.music-player-audio::-webkit-media-controls-time-remaining-display {
color: #ddd;
}
`;
container.appendChild(style);
// Cover Image (Record player style)
const cover = document.createElement('img');
cover.src = originalImg.src;
cover.style.width = "200px";
cover.style.height = "200px";
cover.style.objectFit = "cover";
cover.style.borderRadius = "50%";
cover.style.boxShadow = "0 8px 25px rgba(0,0,0,0.8), 0 0 0 8px #111, 0 0 0 10px #333";
cover.style.marginBottom = "25px";
cover.style.animation = "music-spin 12s linear infinite";
cover.style.animationPlayState = "paused";
container.appendChild(cover);
// Track Title
const titleEl = document.createElement('h2');
titleEl.textContent = songTitle;
titleEl.style.margin = "0 0 5px 0";
titleEl.style.fontSize = "22px";
titleEl.style.textAlign = "center";
titleEl.style.fontWeight = "700";
titleEl.style.letterSpacing = "0.5px";
container.appendChild(titleEl);
// Artist Name
const artistEl = document.createElement('h4');
artistEl.textContent = artistName;
artistEl.style.margin = "0 0 25px 0";
artistEl.style.fontSize = "14px";
artistEl.style.textAlign = "center";
artistEl.style.fontWeight = "400";
artistEl.style.color = "#a0a0a0";
container.appendChild(artistEl);
// HTML5 Audio Element
const audio = document.createElement('audio');
audio.src = audioUrl;
audio.controls = true;
audio.className = "music-player-audio";
audio.style.width = "100%";
audio.style.outline = "none";
audio.style.marginBottom = "25px";
container.appendChild(audio);
// Spin animation logic
audio.onplay = () => cover.style.animationPlayState = "running";
audio.onpause = () => cover.style.animationPlayState = "paused";
// Lyrics Display Area
const lyricsContainer = document.createElement('div');
lyricsContainer.className = "music-player-lyrics";
lyricsContainer.style.width = "100%";
lyricsContainer.style.height = "160px";
lyricsContainer.style.overflowY = "auto";
lyricsContainer.style.textAlign = "center";
lyricsContainer.style.position = "relative";
lyricsContainer.style.padding = "25px 0";
lyricsContainer.style.boxSizing = "border-box";
lyricsContainer.style.maskImage = "linear-gradient(transparent, black 25%, black 75%, transparent)";
lyricsContainer.style.webkitMaskImage = "linear-gradient(transparent, black 25%, black 75%, transparent)";
container.appendChild(lyricsContainer);
// Parse Lyric text (LRC Format)
let parsedLyrics = [];
const lines = lyricText.split('\n');
const lrcRegex = /\[(\d{2,}):(\d{2}(?:\.\d+)?)\](.*)/;
lines.forEach(line => {
const match = line.match(lrcRegex);
if (match) {
const minutes = parseInt(match[1], 10);
const seconds = parseFloat(match[2]);
const text = match[3].trim();
parsedLyrics.push({ time: minutes * 60 + seconds, text: text });
} else if (line.trim().length > 0) {
// Un-timed lyrics just shown without syncing capability
parsedLyrics.push({ time: -1, text: line.trim() });
}
});
// Sort valid synced lyrics chronologically
parsedLyrics.sort((a, b) => a.time - b.time);
// Render Lyrics Elements
let lineElements = [];
parsedLyrics.forEach(lyric => {
const p = document.createElement('p');
p.textContent = lyric.text || "\u00A0"; // Prevent layout collapse on empty lines
p.style.margin = "8px 0";
p.style.fontSize = "15px";
p.style.lineHeight = "1.6";
p.style.transition = "all 0.3s ease-out";
p.style.color = "#888888";
p.style.cursor = lyric.time >= 0 ? "pointer" : "default";
// Click to seek functionality
if (lyric.time >= 0) {
p.addEventListener('click', () => {
audio.currentTime = lyric.time;
audio.play().catch(() => {}); // Catch play restrictions silently
});
}
lyricsContainer.appendChild(p);
lineElements.push({ time: lyric.time, el: p });
});
// Main Audio/Lyric Syncing Logic
audio.addEventListener('timeupdate', () => {
const ct = audio.currentTime;
let activeIndex = -1;
// Find the most recent active lyric line
for (let i = 0; i < lineElements.length; i++) {
if (lineElements[i].time >= 0 && lineElements[i].time <= ct) {
activeIndex = i;
}
}
// Apply styles and perform scroll mapping
lineElements.forEach((item, index) => {
if (index === activeIndex) {
item.el.style.color = "#1db954"; // Active highlight color
item.el.style.fontWeight = "bold";
item.el.style.transform = "scale(1.1)";
item.el.style.textShadow = "0 0 15px rgba(29, 185, 84, 0.4)";
// Auto Scroll active centered
const elOffset = item.el.offsetTop;
const elHeight = item.el.clientHeight;
const containerHalf = lyricsContainer.clientHeight / 2;
lyricsContainer.scrollTo({
top: elOffset - containerHalf + (elHeight / 2),
behavior: 'smooth'
});
} else {
item.el.style.color = "#888888";
item.el.style.fontWeight = "normal";
item.el.style.transform = "scale(1)";
item.el.style.textShadow = "none";
}
});
});
return container;
}Apply Changes
