function processImage(originalImg, themeColor = "#3ddc84", title = "Android Audio Player") {
// Create main phone-like container
const container = document.createElement('div');
container.style.width = '320px';
container.style.height = '600px';
container.style.border = '12px solid #222';
container.style.borderRadius = '36px';
container.style.backgroundColor = '#121212';
container.style.color = '#ffffff';
container.style.fontFamily = '"Roboto", "Segoe UI", sans-serif';
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.alignItems = 'center';
container.style.position = 'relative';
container.style.boxShadow = '0 15px 35px rgba(0,0,0,0.6)';
container.style.overflow = 'hidden';
container.style.transition = 'border-color 0.3s ease';
// Fake status bar
const statusBar = document.createElement('div');
statusBar.style.width = '100%';
statusBar.style.height = '24px';
statusBar.style.display = 'flex';
statusBar.style.justifyContent = 'space-between';
statusBar.style.alignItems = 'center';
statusBar.style.padding = '0 20px';
statusBar.style.boxSizing = 'border-box';
statusBar.style.fontSize = '12px';
statusBar.style.fontWeight = 'bold';
statusBar.style.color = '#cccccc';
statusBar.style.backgroundColor = '#000000';
const timeNow = new Date();
const timeString = timeNow.getHours() + ':' + timeNow.getMinutes().toString().padStart(2, '0');
statusBar.innerHTML = `<span>${timeString}</span><span>100% đ</span>`;
container.appendChild(statusBar);
// App Header Title
const header = document.createElement('h2');
header.textContent = title;
header.style.fontSize = '18px';
header.style.margin = '20px 0 10px 0';
header.style.textAlign = 'center';
header.style.color = themeColor;
container.appendChild(header);
// Album Art (using the required originalImg)
const artContainer = document.createElement('div');
artContainer.style.width = '200px';
artContainer.style.height = '200px';
artContainer.style.borderRadius = '50%';
artContainer.style.overflow = 'hidden';
artContainer.style.boxShadow = `0 0 25px ${themeColor}66`;
artContainer.style.margin = '25px 0';
const art = document.createElement('img');
art.src = originalImg.src;
art.style.width = '100%';
art.style.height = '100%';
art.style.objectFit = 'cover';
artContainer.appendChild(art);
container.appendChild(artContainer);
// Track Name label
const trackName = document.createElement('div');
trackName.textContent = 'No ringtone loaded';
trackName.style.fontSize = '14px';
trackName.style.color = '#aaaaaa';
trackName.style.marginBottom = '25px';
trackName.style.maxWidth = '85%';
trackName.style.whiteSpace = 'nowrap';
trackName.style.overflow = 'hidden';
trackName.style.textOverflow = 'ellipsis';
container.appendChild(trackName);
// HTML5 Audio Player
const audioPlayer = document.createElement('audio');
audioPlayer.controls = true;
audioPlayer.style.width = '85%';
audioPlayer.style.outline = 'none';
audioPlayer.style.marginBottom = '15px';
// Style controls filter to somewhat match dark theme on some browsers
audioPlayer.style.filter = 'invert(0.9) hue-rotate(180deg)';
container.appendChild(audioPlayer);
// Animation for spinning album art
const spinAnimation = artContainer.animate([
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(360deg)' }
], {
duration: 12000,
iterations: Infinity
});
spinAnimation.pause(); // Initialize paused
audioPlayer.addEventListener('play', () => spinAnimation.play());
audioPlayer.addEventListener('pause', () => spinAnimation.pause());
audioPlayer.addEventListener('ended', () => spinAnimation.pause());
// Drag & Drop instruction text
const dropInstruction = document.createElement('div');
dropInstruction.innerHTML = '<i>Drag & Drop MP3 anywhere to play</i>';
dropInstruction.style.fontSize = '12px';
dropInstruction.style.color = '#777777';
dropInstruction.style.marginBottom = 'auto';
container.appendChild(dropInstruction);
// Record Ringtone Button
const recordBtn = document.createElement('button');
recordBtn.textContent = 'đī¸ Record Audio Track';
recordBtn.style.marginBottom = '30px';
recordBtn.style.padding = '14px 24px';
recordBtn.style.borderRadius = '30px';
recordBtn.style.border = 'none';
recordBtn.style.backgroundColor = themeColor;
recordBtn.style.color = '#121212';
recordBtn.style.fontSize = '14px';
recordBtn.style.fontWeight = 'bold';
recordBtn.style.cursor = 'pointer';
recordBtn.style.boxShadow = '0 5px 15px rgba(0,0,0,0.4)';
recordBtn.style.transition = 'transform 0.2s, background-color 0.2s';
recordBtn.onmouseover = () => recordBtn.style.transform = 'scale(1.05)';
recordBtn.onmouseout = () => recordBtn.style.transform = 'scale(1)';
let mediaRecorder;
let audioChunks = [];
let isRecording = false;
// Recording Logic using MediaDevices API
recordBtn.addEventListener('click', async () => {
if (!isRecording) {
try {
// Request microphone permissions
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
audioChunks = [];
mediaRecorder.start();
mediaRecorder.addEventListener('dataavailable', (event) => {
if (event.data.size > 0) {
audioChunks.push(event.data);
}
});
mediaRecorder.addEventListener('stop', () => {
const mimeType = mediaRecorder.mimeType || 'audio/webm';
const audioBlob = new Blob(audioChunks, { type: mimeType });
const audioUrl = URL.createObjectURL(audioBlob);
audioPlayer.src = audioUrl;
trackName.textContent = 'Recorded Track UI';
audioPlayer.play();
});
recordBtn.textContent = 'âšī¸ Stop Recording';
recordBtn.style.backgroundColor = '#f44336'; // Red for recording
recordBtn.style.color = '#ffffff';
trackName.textContent = 'Recording microphone...';
isRecording = true;
} catch (err) {
alert('Microphone access denied or unavailable in this environment.');
console.error('Audio Record Error: ', err);
}
} else {
// Stop recording
mediaRecorder.stop();
// Stop all audio tracks from mic to release hardware overhead
mediaRecorder.stream.getTracks().forEach(track => track.stop());
recordBtn.textContent = 'đī¸ Record Audio Track';
recordBtn.style.backgroundColor = themeColor;
recordBtn.style.color = '#121212';
isRecording = false;
}
});
container.appendChild(recordBtn);
// Drag and Drop Logic
container.addEventListener('dragover', (e) => {
e.preventDefault();
container.style.borderColor = themeColor;
});
container.addEventListener('dragleave', (e) => {
e.preventDefault();
container.style.borderColor = '#222';
});
container.addEventListener('drop', (e) => {
e.preventDefault();
container.style.borderColor = '#222';
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
const file = e.dataTransfer.files[0];
// Validate if it is an audio file (e.g. mp3, wav, flac)
if (file.type.startsWith('audio/')) {
const audioUrl = URL.createObjectURL(file);
audioPlayer.src = audioUrl;
trackName.textContent = file.name;
audioPlayer.play();
} else {
alert('Invalid file format. Please drop a valid audio file (e.g. MP3, WAV, OGG).');
}
}
});
return container;
}This tool provides a mobile-themed interface for recording and playing audio tracks. Users can record custom audio directly via their microphone or play existing MP3 and other audio files by dragging and dropping them into the player. It features a visual album art display that animates during playback, making it useful for quickly capturing voice memos, creating short ringtones, or previewing audio files in a simulated Android environment.