Audio Clip Of Universal Pictures Fanfares

function processImage(originalImg, fanfareType = "Jerry Goldsmith") {
  // Create Main Display Container
  const container = document.createElement('div');
  container.style.position = 'relative';
  container.style.display = 'inline-block';
  container.style.width = '100%';
  container.style.maxWidth = '800px';
  container.style.overflow = 'hidden';
  container.style.fontFamily = 'Arial, sans-serif';
  container.style.borderRadius = '8px';
  container.style.boxShadow = '0 6px 12px rgba(0,0,0,0.5)';
  container.style.backgroundColor = '#000';

  // Add Original Image as Poster Background
  const img = document.createElement('img');
  img.src = originalImg.src;
  img.style.display = 'block';
  img.style.width = '100%';
  img.style.maxHeight = '600px';
  img.style.objectFit = 'contain';
  img.style.opacity = '0.4';
  img.style.filter = 'blur(2px)';
  container.appendChild(img);

  // UI Overlay
  const overlay = document.createElement('div');
  overlay.style.position = 'absolute';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.display = 'flex';
  overlay.style.flexDirection = 'column';
  overlay.style.alignItems = 'center';
  overlay.style.justifyContent = 'center';
  overlay.style.color = '#fff';

  const title = document.createElement('h2');
  title.innerText = 'Universal Pictures';
  title.style.margin = '0 0 8px 0';
  title.style.textAlign = 'center';
  title.style.fontSize = '32px';
  title.style.textShadow = '2px 2px 4px rgba(0,0,0,0.8)';
  title.style.letterSpacing = '2px';
  overlay.appendChild(title);

  const subtitle = document.createElement('p');
  subtitle.innerText = `${fanfareType} Fanfare Audio Clip Simulator`;
  subtitle.style.margin = '0 0 30px 0';
  subtitle.style.fontSize = '18px';
  subtitle.style.textShadow = '1px 1px 2px rgba(0,0,0,0.8)';
  subtitle.style.color = '#d4af37';
  overlay.appendChild(subtitle);

  const playBtn = document.createElement('button');
  playBtn.innerHTML = '► Play Fanfare';
  playBtn.style.padding = '14px 28px';
  playBtn.style.fontSize = '18px';
  playBtn.style.fontWeight = 'bold';
  playBtn.style.color = '#111';
  playBtn.style.backgroundColor = '#d4af37'; // Majestic Gold
  playBtn.style.border = '2px solid #fff';
  playBtn.style.borderRadius = '30px';
  playBtn.style.cursor = 'pointer';
  playBtn.style.transition = 'all 0.2s ease';
  playBtn.style.boxShadow = '0 4px 10px rgba(0,0,0,0.5)';
  
  playBtn.onmouseover = () => {
    playBtn.style.transform = 'scale(1.05)';
    playBtn.style.backgroundColor = '#f1c40f';
  };
  playBtn.onmouseout = () => {
    playBtn.style.transform = 'scale(1)';
    playBtn.style.backgroundColor = '#d4af37';
  };
  
  overlay.appendChild(playBtn);
  container.appendChild(overlay);

  // Web Audio Context setup
  let audioCtx = null;

  playBtn.addEventListener('click', () => {
    if (!audioCtx) {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      audioCtx = new AudioContext();
    }
    
    if (audioCtx.state === 'suspended') {
      audioCtx.resume();
    }

    // Play a single brass-like note 
    function playNote(freq, startTime, duration) {
      const osc1 = audioCtx.createOscillator();
      const osc2 = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      const filter = audioCtx.createBiquadFilter();

      // Sawtooth with slight detune produces a nice thick brass section synth feel
      osc1.type = 'sawtooth';
      osc2.type = 'sawtooth';
      
      osc1.frequency.value = freq;
      osc2.frequency.value = freq;
      osc2.detune.value = 12; // Detune the second oscillator

      // Filter settings for brass sweep
      filter.type = 'lowpass';
      filter.frequency.setValueAtTime(freq, startTime);
      filter.frequency.exponentialRampToValueAtTime(freq * 3, startTime + 0.1); 
      filter.frequency.exponentialRampToValueAtTime(freq, startTime + duration);

      // Amplitude Envelope
      gain.gain.setValueAtTime(0, startTime);
      gain.gain.linearRampToValueAtTime(0.2, startTime + 0.05); // Attack
      gain.gain.setValueAtTime(0.2, startTime + duration - 0.2); // Sustain
      gain.gain.linearRampToValueAtTime(0, startTime + duration); // Release

      osc1.connect(filter);
      osc2.connect(filter);
      filter.connect(gain);
      gain.connect(audioCtx.destination);

      osc1.start(startTime);
      osc2.start(startTime);
      osc1.stop(startTime + duration);
      osc2.stop(startTime + duration);
    }

    const playChords = (chord, startTime, duration) => {
      chord.forEach(freq => playNote(freq, startTime, duration));
    };

    // Calculate frequency for musical notes based on A4 = 440Hz
    const getFreq = (note, octave) => {
      const notes = { 'C': 0, 'C#': 1, 'D': 2, 'D#': 3, 'E': 4, 'F': 5, 'F#': 6, 'G': 7, 'G#': 8, 'A': 9, 'A#': 10, 'B': 11 };
      const n = (octave - 4) * 12 + (notes[note] - 9);
      return 440 * Math.pow(2, n / 12);
    };

    const t = audioCtx.currentTime;

    // Trigger synthesised renditions of the Universal Fanfare
    if (fanfareType.toLowerCase().includes('jerry')) {
      // 1997 Jerry Goldsmith Fanfare Approximation
      const cMaj = [getFreq('C', 4), getFreq('E', 4), getFreq('G', 4), getFreq('C', 5)];
      const gMaj = [getFreq('G', 3), getFreq('B', 3), getFreq('D', 4), getFreq('G', 4)];
      
      playChords(cMaj, t + 0.0, 0.4);
      playChords(cMaj, t + 0.5, 0.2);
      playChords(cMaj, t + 0.8, 0.2);
      playChords(gMaj, t + 1.1, 0.4);
      playChords(cMaj, t + 1.6, 0.8);
      
      playChords(cMaj, t + 2.7, 0.4);
      playChords(cMaj, t + 3.2, 0.2);
      playChords(cMaj, t + 3.5, 0.2);
      playChords([getFreq('E', 4), getFreq('G', 4), getFreq('B', 4), getFreq('E', 5)], t + 3.8, 0.4);
      playChords([getFreq('C', 4), getFreq('E', 4), getFreq('G', 4), getFreq('C', 5), getFreq('E', 5)], t + 4.3, 2.0);
    } else {
      // 2012 Brian Tyler / David Newman Arrangements Approximation
      const bFlatMaj = [getFreq('A#', 3), getFreq('D', 4), getFreq('F', 4)];
      const eFlatMaj = [getFreq('D#', 4), getFreq('G', 4), getFreq('A#', 4)];
      const fMaj = [getFreq('F', 4), getFreq('A', 4), getFreq('C', 5)];
      
      playChords(bFlatMaj, t + 0.0, 0.4);
      playChords(bFlatMaj, t + 0.6, 0.4);
      playChords(bFlatMaj, t + 1.2, 0.4);
      playChords(eFlatMaj, t + 1.8, 1.0);
      
      playChords(eFlatMaj, t + 3.0, 0.25);
      playChords(eFlatMaj, t + 3.3, 0.25);
      playChords(eFlatMaj, t + 3.6, 0.25);
      playChords(fMaj, t + 4.0, 0.8);
      playChords([getFreq('A#', 3), getFreq('D', 4), getFreq('F', 4), getFreq('A#', 4), getFreq('D', 5)], t + 4.9, 2.0);
    }

    // Give visual feedback when played
    playBtn.innerText = 'Now Playing...';
    setTimeout(() => {
      playBtn.innerHTML = '► Play Again';
    }, 6000);
  });

  return container;
}