You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, newmanAudioUrl = '', goldsmithAudioUrl = '') {
// Main Container Styling
const container = document.createElement('div');
container.style.fontFamily = '"Helvetica Neue", Helvetica, Arial, sans-serif';
container.style.background = 'linear-gradient(135deg, #0f172a, #1e293b)';
container.style.color = '#f8fafc';
container.style.padding = '30px';
container.style.borderRadius = '20px';
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.alignItems = 'center';
container.style.width = '320px';
container.style.boxShadow = '0 15px 35px rgba(0,0,0,0.6)';
container.style.position = 'relative';
container.style.overflow = 'hidden';
// CSS animations and button styling
const style = document.createElement('style');
style.innerHTML = `
@keyframes uni-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.uni-spinning {
animation: uni-spin 10s linear infinite;
}
.btn-theme {
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-theme:active {
transform: scale(0.96);
}
.btn-theme:hover {
opacity: 0.9;
}
`;
container.appendChild(style);
// Cover art displayed as a vinyl record/globe
const imgWrapper = document.createElement('div');
imgWrapper.style.width = '200px';
imgWrapper.style.height = '200px';
imgWrapper.style.borderRadius = '50%';
imgWrapper.style.overflow = 'hidden';
imgWrapper.style.border = '6px solid #334155';
imgWrapper.style.boxShadow = '0 0 25px rgba(100, 150, 255, 0.2)';
imgWrapper.style.margin = '10px 0 25px 0';
imgWrapper.style.display = 'flex';
imgWrapper.style.justifyContent = 'center';
imgWrapper.style.alignItems = 'center';
imgWrapper.style.backgroundColor = '#000';
const canvas = document.createElement('canvas');
const size = 200;
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
// Draw original image scaled to object-fit: cover
const ratio = Math.max(size / originalImg.width, size / originalImg.height);
const dw = originalImg.width * ratio;
const dh = originalImg.height * ratio;
const dx = (size - dw) / 2;
const dy = (size - dh) / 2;
ctx.drawImage(originalImg, dx, dy, dw, dh);
imgWrapper.appendChild(canvas);
container.appendChild(imgWrapper);
// Title and Subtitle
const title = document.createElement('h2');
title.innerText = 'Universal Pictures';
title.style.margin = '0 0 5px 0';
title.style.fontSize = '24px';
title.style.fontWeight = '700';
title.style.letterSpacing = '1px';
title.style.textAlign = 'center';
container.appendChild(title);
const subtitle = document.createElement('p');
subtitle.innerText = 'Fanfare Audio Player';
subtitle.style.margin = '0 0 25px 0';
subtitle.style.fontSize = '14px';
subtitle.style.color = '#94a3b8';
container.appendChild(subtitle);
// Hidden native Audio Element
const audioPlayer = document.createElement('audio');
audioPlayer.style.display = 'none';
container.appendChild(audioPlayer);
// Controls Container
const buttonContainer = document.createElement('div');
buttonContainer.style.display = 'flex';
buttonContainer.style.flexDirection = 'column';
buttonContainer.style.gap = '12px';
buttonContainer.style.width = '100%';
const createButton = (text, bg, textColor = '#fff') => {
const btn = document.createElement('button');
btn.innerText = text;
btn.className = 'btn-theme';
btn.style.width = '100%';
btn.style.padding = '14px';
btn.style.cursor = 'pointer';
btn.style.backgroundColor = bg;
btn.style.color = textColor;
btn.style.border = 'none';
btn.style.borderRadius = '10px';
btn.style.fontSize = '14px';
btn.style.fontWeight = 'bold';
btn.style.boxShadow = '0 4px 6px rgba(0,0,0,0.2)';
return btn;
};
const btnNewman = createButton('► David Newman (2012)', '#2563eb');
const btnGoldsmith = createButton('► Jerry Goldsmith (1997)', '#059669');
const btnStop = createButton('■ Stop Playback', '#dc2626');
btnStop.style.display = 'none';
buttonContainer.appendChild(btnNewman);
buttonContainer.appendChild(btnGoldsmith);
buttonContainer.appendChild(btnStop);
container.appendChild(buttonContainer);
const statusMessage = document.createElement('div');
statusMessage.style.marginTop = '20px';
statusMessage.style.fontSize = '13px';
statusMessage.style.color = '#fbbf24';
statusMessage.style.textAlign = 'center';
statusMessage.style.minHeight = '16px';
container.appendChild(statusMessage);
let synthTimeouts = [];
let audioContext = null;
// Reset everything
const stopAll = () => {
audioPlayer.pause();
audioPlayer.currentTime = 0;
if (audioContext && audioContext.state !== 'closed') {
audioContext.close();
}
audioContext = null;
synthTimeouts.forEach(clearTimeout);
synthTimeouts = [];
imgWrapper.classList.remove('uni-spinning');
statusMessage.innerText = '';
btnNewman.style.display = 'block';
btnGoldsmith.style.display = 'block';
btnStop.style.display = 'none';
};
audioPlayer.onended = stopAll;
// A procedural Web Audio Synthesizer fallback if no custom audio url provided
const playSynthFanfare = (version) => {
const AudioContextAPI = window.AudioContext || window.webkitAudioContext;
if (!AudioContextAPI) {
statusMessage.innerText = 'Web Audio API not supported in this browser.';
stopAll();
return;
}
audioContext = new AudioContextAPI();
const ctx = audioContext;
const mainGain = ctx.createGain();
mainGain.gain.value = 0.3; // Volume control
mainGain.connect(ctx.destination);
const playBrass = (freqs, time, dur) => {
freqs.forEach(freq => {
const osc = ctx.createOscillator();
osc.type = 'sawtooth';
osc.frequency.value = freq;
const filter = ctx.createBiquadFilter();
filter.type = 'lowpass';
filter.Q.value = 1.0;
filter.frequency.setValueAtTime(400, time);
filter.frequency.linearRampToValueAtTime(3500, time + dur * 0.15);
filter.frequency.linearRampToValueAtTime(800, time + dur);
const env = ctx.createGain();
env.gain.setValueAtTime(0, time);
env.gain.linearRampToValueAtTime(1, time + 0.05);
env.gain.setValueAtTime(1, time + dur - 0.2);
env.gain.linearRampToValueAtTime(0, time + dur);
osc.connect(filter);
filter.connect(env);
env.connect(mainGain);
osc.start(time);
osc.stop(time + dur);
});
};
const t = ctx.currentTime;
const C2 = 65.41, G2 = 98.00, C3 = 130.81, G3 = 196.00, C4 = 261.63, E4 = 329.63, G4 = 392.00, C5 = 523.25;
let totalDuration = 0;
if (version === 'newman') {
// Newman version arrangement motif
playBrass([C3, G3, C4, E4], t, 0.4);
playBrass([C3, G3, C4, E4], t + 0.5, 0.4);
playBrass([C3, G3, C4, G4], t + 1.0, 0.8);
playBrass([C3, G3, C4, E4], t + 2.0, 0.4);
playBrass([C3, G3, C4, E4], t + 2.5, 0.4);
playBrass([C3, G3, C4, G4], t + 3.0, 0.8);
playBrass([C4, E4], t + 4.0, 0.2);
playBrass([E4, G4], t + 4.2, 0.2);
playBrass([G4, C5], t + 4.4, 0.4);
// Grand final chord
playBrass([C2, G2, C3, G3, C4, E4, G4, C5], t + 4.8, 3.5);
totalDuration = 8.3;
statusMessage.innerText = 'Synthesizing David Newman Motif...';
} else {
// Goldsmith version trumpet solo buildup motif
playBrass([G3], t, 0.4);
playBrass([G3], t + 0.5, 0.4);
playBrass([G3], t + 1.0, 0.8);
playBrass([G3], t + 2.0, 0.4);
playBrass([G3], t + 2.5, 0.4);
playBrass([G3], t + 3.0, 0.8);
playBrass([G3], t + 4.0, 0.2);
playBrass([G3], t + 4.2, 0.2);
playBrass([G3], t + 4.4, 0.2);
playBrass([C4], t + 4.6, 0.4);
playBrass([E4], t + 5.0, 0.4);
playBrass([G4], t + 5.4, 0.4);
// Grand final chord
playBrass([C2, G2, C3, G3, C4, E4, G4, C5], t + 5.8, 3.5);
totalDuration = 9.3;
statusMessage.innerText = 'Synthesizing Jerry Goldsmith Motif...';
}
// Auto Stop functionality to reset layout
synthTimeouts.push(setTimeout(stopAll, totalDuration * 1000));
};
const handlePlay = (version) => {
stopAll();
imgWrapper.classList.add('uni-spinning');
btnNewman.style.display = 'none';
btnGoldsmith.style.display = 'none';
btnStop.style.display = 'block';
const sourceUrl = version === 'newman' ? newmanAudioUrl : goldsmithAudioUrl;
if (sourceUrl && sourceUrl.trim() !== '') {
audioPlayer.src = sourceUrl;
audioPlayer.play().then(() => {
const author = version === 'newman' ? 'David Newman' : 'Jerry Goldsmith';
statusMessage.innerText = `Playing ${author} fanfare...`;
}).catch(() => {
statusMessage.innerText = 'Audio stream failed! Falling back to synthesizer...';
playSynthFanfare(version);
});
} else {
playSynthFanfare(version);
}
};
btnNewman.onclick = () => handlePlay('newman');
btnGoldsmith.onclick = () => handlePlay('goldsmith');
btnStop.onclick = stopAll;
return container;
}Apply Changes
