function processImage(originalImg, audioUrl = "") {
// Create the main container
const container = document.createElement('div');
container.style.width = '100%';
container.style.maxWidth = '380px';
container.style.margin = '0 auto';
container.style.padding = '30px 20px';
container.style.backgroundColor = '#18181b';
container.style.color = '#ffffff';
container.style.borderRadius = '24px';
container.style.boxShadow = '0 15px 35px rgba(0,0,0,0.5), inset 0 1px 3px rgba(255,255,255,0.1)';
container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.alignItems = 'center';
container.style.boxSizing = 'border-box';
// Add custom styles for animation and customized audio controls
if (!document.getElementById('music-player-styles')) {
const style = document.createElement('style');
style.id = 'music-player-styles';
style.innerHTML = `
@keyframes spin-record {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.custom-audio-player {
height: 48px;
}
/* Styling webkit controls for a cleaner dark look */
.custom-audio-player::-webkit-media-controls-panel {
background-color: #27272a;
border-radius: 12px;
}
.custom-audio-player::-webkit-media-controls-current-time-display,
.custom-audio-player::-webkit-media-controls-time-remaining-display,
.custom-audio-player::-webkit-media-controls-play-button,
.custom-audio-player::-webkit-media-controls-timeline,
.custom-audio-player::-webkit-media-controls-volume-slider,
.custom-audio-player::-webkit-media-controls-mute-button {
filter: invert(1) hue-rotate(180deg);
}
`;
document.head.appendChild(style);
}
// Vinyl Record Wrapper
const recordWrapper = document.createElement('div');
recordWrapper.style.position = 'relative';
recordWrapper.style.width = '240px';
recordWrapper.style.height = '240px';
recordWrapper.style.borderRadius = '50%';
recordWrapper.style.backgroundColor = '#09090b';
// Adding concentric circles to simulate vinyl grooves
recordWrapper.style.backgroundImage = 'radial-gradient(circle, transparent 40%, rgba(255,255,255,0.1) 41%, transparent 42%, transparent 48%, rgba(255,255,255,0.1) 49%, transparent 50%, transparent 60%, rgba(255,255,255,0.1) 61%, transparent 62%, transparent 75%, rgba(255,255,255,0.1) 76%, transparent 77%, transparent 88%, rgba(255,255,255,0.1) 89%, transparent 90%)';
recordWrapper.style.boxShadow = '0 12px 24px rgba(0,0,0,0.6), inset 0 0 0 10px #111, inset 0 0 0 14px #222';
recordWrapper.style.marginBottom = '25px';
recordWrapper.style.display = 'flex';
recordWrapper.style.justifyContent = 'center';
recordWrapper.style.alignItems = 'center';
recordWrapper.style.animation = 'spin-record 8s linear infinite';
recordWrapper.style.animationPlayState = 'paused'; // Paused by default
// Album Image from the originalImg parameter
const albumArt = document.createElement('img');
albumArt.src = originalImg.src;
albumArt.style.width = '100px';
albumArt.style.height = '100px';
albumArt.style.objectFit = 'cover';
albumArt.style.borderRadius = '50%';
albumArt.style.border = '2px solid #27272a';
albumArt.style.pointerEvents = 'none';
albumArt.draggable = false;
// Center hole of the record
const recordHole = document.createElement('div');
recordHole.style.position = 'absolute';
recordHole.style.width = '14px';
recordHole.style.height = '14px';
recordHole.style.backgroundColor = '#18181b';
recordHole.style.borderRadius = '50%';
recordHole.style.boxShadow = 'inset 0 2px 4px rgba(0,0,0,0.8)';
recordWrapper.appendChild(albumArt);
recordWrapper.appendChild(recordHole);
// Track Title Info
const trackTitle = document.createElement('h3');
trackTitle.innerText = 'Audio Mp3 Player';
trackTitle.style.margin = '0 0 8px 0';
trackTitle.style.fontSize = '22px';
trackTitle.style.fontWeight = '700';
trackTitle.style.textAlign = 'center';
// Track Subtitle Info (Filename)
const trackSubtitle = document.createElement('p');
trackSubtitle.innerText = 'Please select an MP3 file to play';
trackSubtitle.style.margin = '0 0 25px 0';
trackSubtitle.style.fontSize = '14px';
trackSubtitle.style.color = '#a1a1aa';
trackSubtitle.style.textAlign = 'center';
trackSubtitle.style.maxWidth = '100%';
trackSubtitle.style.whiteSpace = 'nowrap';
trackSubtitle.style.overflow = 'hidden';
trackSubtitle.style.textOverflow = 'ellipsis';
trackSubtitle.style.padding = '0 10px';
trackSubtitle.style.boxSizing = 'border-box';
// Core Audio Element
const audioElement = document.createElement('audio');
audioElement.className = 'custom-audio-player';
audioElement.controls = true;
audioElement.style.width = '100%';
audioElement.style.outline = 'none';
audioElement.style.marginBottom = '20px';
if (audioUrl) {
audioElement.src = audioUrl;
trackSubtitle.innerText = audioUrl.split('/').pop() || 'Loaded from default URL';
}
// File Input UI wrapper
const fileInputWrapper = document.createElement('div');
fileInputWrapper.style.width = '100%';
const fileInputLabel = document.createElement('label');
fileInputLabel.innerHTML = `<svg style="width:18px;height:18px;margin-bottom:-4px;margin-right:6px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg> Load Audio File`;
fileInputLabel.style.display = 'block';
fileInputLabel.style.width = '100%';
fileInputLabel.style.padding = '14px 0';
fileInputLabel.style.backgroundColor = '#6366f1';
fileInputLabel.style.color = 'white';
fileInputLabel.style.textAlign = 'center';
fileInputLabel.style.borderRadius = '12px';
fileInputLabel.style.cursor = 'pointer';
fileInputLabel.style.fontSize = '16px';
fileInputLabel.style.fontWeight = '600';
fileInputLabel.style.transition = 'background-color 0.2s, transform 0.1s';
// Simple interactions for button
fileInputLabel.onmouseenter = () => fileInputLabel.style.backgroundColor = '#4f46e5';
fileInputLabel.onmouseleave = () => fileInputLabel.style.backgroundColor = '#6366f1';
fileInputLabel.onmousedown = () => fileInputLabel.style.transform = 'scale(0.97)';
fileInputLabel.onmouseup = () => fileInputLabel.style.transform = 'scale(1)';
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'audio/mp3, audio/mpeg, audio/wav, audio/ogg, audio/*';
fileInput.style.display = 'none';
fileInputLabel.appendChild(fileInput);
fileInputWrapper.appendChild(fileInputLabel);
// Interaction Logic (Handling Audio Files)
let currentObjectUrl = null;
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
// Clean up old object url memory leak
if (currentObjectUrl) {
URL.revokeObjectURL(currentObjectUrl);
}
currentObjectUrl = URL.createObjectURL(file);
audioElement.src = currentObjectUrl;
trackTitle.innerText = 'Now Playing';
trackSubtitle.innerText = file.name;
audioElement.play().catch(err => console.log('Playback error:', err));
}
});
// Spin animation logic tied to media playback
audioElement.addEventListener('play', () => {
recordWrapper.style.animationPlayState = 'running';
});
audioElement.addEventListener('pause', () => {
recordWrapper.style.animationPlayState = 'paused';
});
audioElement.addEventListener('ended', () => {
recordWrapper.style.animationPlayState = 'paused';
});
// Assemble the DOM structure
container.appendChild(recordWrapper);
container.appendChild(trackTitle);
container.appendChild(trackSubtitle);
container.appendChild(audioElement);
container.appendChild(fileInputWrapper);
return container;
}This tool provides a stylized, interactive MP3 and audio file player featuring a visual vinyl record animation. Users can upload various audio formats, such as MP3, WAV, and OGG, to play them through a custom dark-themed interface. The player dynamically displays the file name and features a rotating record effect that syncs with the audio playback. It is ideal for personal music listening, testing audio files, or integrating a visually engaging media player into web projects.