You are a world-class Audio Software Engineer specialized in...

Prompt

You are a world-class Audio Software Engineer specialized in WebAudio and Sample-based synthesis. Task: Create a High-Fidelity Orchestral Piano Roll in a SINGLE index.html. External Library Permissions: You MUST use https://cdn.jsdelivr.net/npm/soundfont-player@0.12.0/dist/soundfont-player.min.js. Persona: Write clean, modular JavaScript. Ensure every function is defined.[1][2] No placeholders. Create an advanced Orchestral Piano Roll with the following specifications: 1. Multi-Instrument Engine: Use Soundfont.instrument to load three distinct high-quality instruments: Lead: 'acoustic_grand_piano' or 'celesta' Rhythm: 'pizzicato_strings' Backing: 'string_ensemble_1' Add an 'Instrument Selector' for each track. [1] 2. High-Fidelity Logic: When a user clicks a note on the grid, it triggers the .play() method of the loaded SoundFont instrument. Implement a "Loading..."[2][4][5][6][7] overlay that disappears only after all three instruments have successfully fetched their samples from the CDN. 3. Orchestral Composition Logic: Pre-populate the grid with a 4-bar "Whimsical Fantasy" melody similar to a John Williams score: Track 1 (Celesta): A high-pitched staccato melody. Track 2 (Pizzicato Strings): A bouncy, alternating bass line. Ensure the playhead synchronization is perfect. 4. Features: Export Audio: Use MediaRecorder to capture the AudioContext destination so the user can download their creation as a high-quality audio file. [1] - Visuals: Dark mode interface with neon-colored notes representing different instruments. [1] - Performance: Use requestAnimationFrame for the playhead to ensure 60fps smoothness.

A system prompt was added to support web rendering