function processImage(originalImg, audioUrl = "https://archive.org/download/TV_theme_songs/UniversalPictures.mp3", theme = "dark") {
// Colors based on theme
const isDark = theme === "dark" || theme === "1";
const bgColor = isDark ? "#121212" : "#f5f5f5";
const cardColor = isDark ? "#1e1e1e" : "#ffffff";
const textColor = isDark ? "#ffffff" : "#000000";
const subTextColor = isDark ? "#a0a0a0" : "#666666";
const accentColor = "#007BFF";
// Main Container
const container = document.createElement("div");
container.style.fontFamily = "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
container.style.width = "360px";
container.style.maxWidth = "100%";
container.style.padding = "30px 20px";
container.style.backgroundColor = bgColor;
container.style.display = "flex";
container.style.justifyContent = "center";
container.style.alignItems = "center";
container.style.boxSizing = "border-box";
// Player Card
const card = document.createElement("div");
card.style.width = "100%";
card.style.backgroundColor = cardColor;
card.style.borderRadius = "24px";
card.style.boxShadow = isDark ? "0 15px 35px rgba(0,0,0,0.5)" : "0 15px 35px rgba(0,0,0,0.1)";
card.style.padding = "25px 20px";
card.style.display = "flex";
card.style.flexDirection = "column";
card.style.alignItems = "center";
card.style.boxSizing = "border-box";
card.style.gap = "20px";
// Vinyl Record (Image Wrapper)
const imgWrapper = document.createElement("div");
imgWrapper.style.position = "relative";
imgWrapper.style.width = "220px";
imgWrapper.style.height = "220px";
imgWrapper.style.borderRadius = "50%";
imgWrapper.style.boxShadow = isDark ? "0 10px 25px rgba(0,0,0,0.8)" : "0 10px 25px rgba(0,0,0,0.3)";
imgWrapper.style.border = `6px solid ${isDark ? "#2a2a2a" : "#e0e0e0"}`;
imgWrapper.style.overflow = "hidden";
imgWrapper.style.display = "flex";
imgWrapper.style.justifyContent = "center";
imgWrapper.style.alignItems = "center";
const img = document.createElement("img");
img.src = originalImg.src;
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "cover";
// Center hole of the vinyl
const vinylHole = document.createElement("div");
vinylHole.style.position = "absolute";
vinylHole.style.width = "30px";
vinylHole.style.height = "30px";
vinylHole.style.backgroundColor = cardColor;
vinylHole.style.borderRadius = "50%";
vinylHole.style.boxShadow = "inset 0 2px 5px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.1)";
imgWrapper.appendChild(img);
imgWrapper.appendChild(vinylHole);
card.appendChild(imgWrapper);
// Animation for Vinyl
let anim;
if (typeof imgWrapper.animate === 'function') {
anim = imgWrapper.animate([
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(360deg)' }
], {
duration: 6000,
iterations: Infinity
});
anim.pause();
}
// Title and Artist Info
const infoDiv = document.createElement("div");
infoDiv.style.textAlign = "center";
infoDiv.style.width = "100%";
const title = document.createElement("h2");
title.innerText = "Universal Pictures Fanfare";
title.style.margin = "0 0 5px 0";
title.style.fontSize = "20px";
title.style.fontWeight = "700";
title.style.color = textColor;
const artist = document.createElement("p");
artist.innerText = "David Newman";
artist.style.margin = "0";
artist.style.fontSize = "15px";
artist.style.fontWeight = "500";
artist.style.color = subTextColor;
infoDiv.appendChild(title);
infoDiv.appendChild(artist);
card.appendChild(infoDiv);
// Audio Element
const audio = document.createElement("audio");
audio.crossOrigin = "anonymous";
audio.src = audioUrl;
card.appendChild(audio);
// Progress Controls
const progressWrapper = document.createElement("div");
progressWrapper.style.width = "100%";
progressWrapper.style.display = "flex";
progressWrapper.style.flexDirection = "column";
progressWrapper.style.gap = "8px";
const progressBar = document.createElement("input");
progressBar.type = "range";
progressBar.value = 0;
progressBar.min = 0;
progressBar.max = 100;
progressBar.style.width = "100%";
progressBar.style.cursor = "pointer";
progressBar.style.accentColor = accentColor;
const timeDiv = document.createElement("div");
timeDiv.style.display = "flex";
timeDiv.style.justifyContent = "space-between";
timeDiv.style.width = "100%";
const currTimeLabel = document.createElement("span");
currTimeLabel.innerText = "0:00";
currTimeLabel.style.fontSize = "12px";
currTimeLabel.style.color = subTextColor;
currTimeLabel.style.fontVariantNumeric = "tabular-nums";
const totalTimeLabel = document.createElement("span");
totalTimeLabel.innerText = "0:00";
totalTimeLabel.style.fontSize = "12px";
totalTimeLabel.style.color = subTextColor;
totalTimeLabel.style.fontVariantNumeric = "tabular-nums";
timeDiv.appendChild(currTimeLabel);
timeDiv.appendChild(totalTimeLabel);
progressWrapper.appendChild(progressBar);
progressWrapper.appendChild(timeDiv);
card.appendChild(progressWrapper);
// Playback Controls
const controlsDiv = document.createElement("div");
controlsDiv.style.display = "flex";
controlsDiv.style.alignItems = "center";
controlsDiv.style.justifyContent = "center";
controlsDiv.style.gap = "25px";
controlsDiv.style.marginTop = "5px";
// Play/Pause Button
const playBtn = document.createElement("button");
playBtn.style.width = "60px";
playBtn.style.height = "60px";
playBtn.style.borderRadius = "50%";
playBtn.style.border = "none";
playBtn.style.backgroundColor = accentColor;
playBtn.style.color = "#fff";
playBtn.style.cursor = "pointer";
playBtn.style.display = "flex";
playBtn.style.justifyContent = "center";
playBtn.style.alignItems = "center";
playBtn.style.boxShadow = "0 6px 15px rgba(0, 123, 255, 0.4)";
playBtn.style.transition = "transform 0.1s ease-in-out";
playBtn.onmousedown = () => playBtn.style.transform = "scale(0.95)";
playBtn.onmouseup = () => playBtn.style.transform = "scale(1)";
playBtn.onmouseleave = () => playBtn.style.transform = "scale(1)";
const playIcon = `<svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`;
const pauseIcon = `<svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`;
playBtn.innerHTML = playIcon;
controlsDiv.appendChild(playBtn);
card.appendChild(controlsDiv);
container.appendChild(card);
// Logic Functions
const formatTime = (timeInSecs) => {
if (!timeInSecs || isNaN(timeInSecs)) return "0:00";
const mins = Math.floor(timeInSecs / 60);
const secs = Math.floor(timeInSecs % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
};
let isPlaying = false;
audio.addEventListener("loadedmetadata", () => {
totalTimeLabel.innerText = formatTime(audio.duration);
progressBar.max = audio.duration;
});
audio.addEventListener("timeupdate", () => {
currTimeLabel.innerText = formatTime(audio.currentTime);
if (!progressBar.matches(':active')) {
progressBar.value = audio.currentTime;
}
});
audio.addEventListener("ended", () => {
isPlaying = false;
playBtn.innerHTML = playIcon;
if (anim) anim.pause();
progressBar.value = 0;
audio.currentTime = 0;
});
progressBar.addEventListener("input", () => {
currTimeLabel.innerText = formatTime(progressBar.value);
});
progressBar.addEventListener("change", () => {
audio.currentTime = progressBar.value;
});
playBtn.addEventListener("click", () => {
if (isPlaying) {
audio.pause();
playBtn.innerHTML = playIcon;
if (anim) anim.pause();
} else {
audio.play().catch(e => console.error("Playback failed:", e));
playBtn.innerHTML = pauseIcon;
if (anim) anim.play();
}
isPlaying = !isPlaying;
});
return container;
}This tool allows users to create a stylized, interactive audio player featuring a rotating vinyl record design. Users can upload an image to serve as the record’s artwork, which is then integrated into a themed player card that includes playback controls, a progress bar, and time indicators. It is ideal for music enthusiasts, content creators, or web developers looking to add a decorative and functional audio element to a digital project or personal collection.