Advanced/Complex Web Coding

Prompt

You are an expert Audio Software Engineer and Lead Web Audio Architect. Your task is to design and implement a production-ready, fully client-side, browser-based Digital Audio Workstation (DAW). The application must operate 100% offline once loaded, run entirely in the browser, and match or exceed the core functionality and visual polish of modern web DAWs (such as BandLab or Soundtrap), with enhanced visual feedback and a dedicated Wavetable Synthesizer. 1. 1. Core Technical Constraints & Architecture * Execution Environment: 100% Client-Side. No external server API calls for audio processing, synthesis, or file export. * Framework & Language Agnostic: Build using clean, modular Web Standards (Vanilla TypeScript/JavaScript with Web Components, or React/Vue/Svelte). Standard Web Audio API and HTML5 Canvas / WebGL must be used for latency-critical audio and high-performance UI rendering. * Storage & State: * Fast, client-side persistence via IndexedDB for cached samples, user patches, and auto-saves. * Project Import/Export in custom .project format (JSON-based specification containing track structures, audio clip base64/ArrayBuffers, MIDI note arrays, automation data, synth parameters, and FX chains). * Audio Rendering: * Real-time processing via AudioContext and custom AudioWorkletNode instances for custom DSP. * Non-real-time faster-than-light export rendering via OfflineAudioContext. 2. 2. Visual & UX Requirements (BandLab/Soundtrap Style) 1. Top Transport Bar: * Play, Stop, Pause, Record, Loop toggle, Metronome toggle (with BPM and subdivision controls). * Tempo (BPM), Time Signature (e.g., 4/4, 3/4), Master Volume meter with peak clipping indicators. * Project title editor, Save .project, Open .project, Export (WAV / MP3) buttons. 2. Left Track Header Panel: * Add Track menu: Audio Track, Wavetable Synth Track, Drum Sampler Track. * Per Track controls: Track Name, Mute (M), Solo (S), Arm for Record (R), Gain slider, Pan knob, FX Rack toggle, Automation lane toggle. 3. Center Main Timeline / Arranger: * High-performance grid canvas with beat grid, bar markers, playhead marker, zoom controls (horizontal/vertical). * Audio Clip objects: Waveform rendering, clip trimming (left/right handles), clip gain, clip loop, clip drag-and-drop. * MIDI Clip objects: Note preview thumbnails, clip resizing, duplicating. 4. Bottom Modular Drawer (Collapsible & Tabbed): * Tab A: Piano Roll Editor: Pitch grid (C0 to C8), timeline grid with snap-to-grid (1/4, 1/8, 1/16, 1/32, triplets), velocity editor, draw tool, erase tool, select tool, quantization controls. * Tab B: Custom Wavetable Synthesizer: Custom visualizer for active wavetable frame, modulation routing matrix, oscillator controls, filter section, envelopes, LFOs. * Tab C: Audio Clip Inspector: Trim points, sample pitch shift, time-stretch factor, reverse sample toggle, clip envelope. * Tab D: Mixer & Master FX: Channel strip faders for all tracks with dynamic visual VU meters and master limiter/bus FX chain. 3. 3. Detailed Synthesizer Architecture: Genuine Wavetable Synth Implement a two-oscillator modern Wavetable Synthesizer engine using custom AudioWorkletNode or Web Audio PeriodicWave morphing tables. 1. Synth Core Features: * Oscillator 1 & Oscillator 2: * Wavetable selection (Standard shapes: Sine, Saw, Square, Triangle + Complex tables: Harmonics, Digital, Vocal, Metallic, Custom User Table). * Wavetable Position Knob (WT Pos): Smoothly morphs through single-cycle waveforms in the active wavetable array. * Pitch Coarse (semitones: -24 to +24) and Fine Tune (cents: -100 to +100). * Unison Voice Control (1 to 7 voices) with Detune and Stereo Spread. * Sub-Oscillator & Noise Generator: * Sub-Osc shape selector (Sine, Square, Triangle), volume control, octave selector (-1, -2). * White / Pink Noise generator with level control. * Multimode Filter Section: * Filter Types: Lowpass (12dB / 24dB), Highpass (12dB / 24dB), Bandpass, Notch. * Cutoff Frequency knob, Resonance knob, Drive/Saturation knob, Envelope 1 Amount knob. * Envelopes (ADSR): * ENV 1 (Amp Envelope): Attack, Decay, Sustain, Release controls. * ENV 2 (Filter/Modulation Envelope): Attack, Decay, Sustain, Release controls with visual curve preview. * Low-Frequency Oscillators (LFO 1 & LFO 2): * LFO Waveforms (Sine, Triangle, Saw, Square, Sample & Hold). * Rate control (Hz or BPM Sync: 1/1, 1/2, 1/4, 1/8, 1/16, etc.). * Modulation Matrix (Key Feature): * Grid interface allowing routing of sources (LFO 1, LFO 2, ENV 2, Velocity, Mod Wheel) to targets (Osc 1/2 WT Pos, Cutoff, Osc Pitch, Pan, Level) with bipolar depth sliders. 4. 4. Track FX Rack Architecture Each track (and the Master Bus) must feature a customizable, re-orderable Effects Rack containing standard audio nodes: 1. Parametric EQ: 3-band equalizer (Low Shelf, Peaking Mid, High Shelf) with dynamic frequency response spectrum plot. 2. Delay: Stereo delay with Time (ms or BPM sync), Feedback, Ping-Pong toggle, and Highpass/Lowpass feedback filters. 3. Reverb: Algorithmic or Convolver Reverb with Impulse Response generation, Decay, Size, Pre-delay, and Wet/Dry mix. 4. Compressor: Threshold, Ratio, Attack, Release, Knee, and Makeup Gain controls. 5. Distortion / Bitcrusher: Drive amount, Saturation curve (Hard Clipping, Soft Tube, Wavefolder), Bit Depth reduction, and Sample Rate reduction. 5. 5. File Formats, Serialization, and Audio Export 1. Custom .project File Specification (JSON): { "version": "1.0.0", "meta": { "title": "Untitled Project", "bpm": 120, "timeSignature": [4, 4], "sampleRate": 44100 }, "tracks": [ { "id": "track_1", "name": "Wavetable Synth", "type": "synth", "volume": 0.8, "pan": 0.0, "muted": false, "soloed": false, "synthPatch": { /* ADSR, Wavetable Position, LFOs, Matrix */ }, "fxChain": [ /* Array of FX node configs */ ], "clips": [ { "id": "clip_1", "startTime": 0.0, "duration": 4.0, "notes": [ { "pitch": 60, "time": 0.0, "duration": 1.0, "velocity": 0.9 } ] } ], "automation": { "volume": [ { "time": 0.0, "value": 0.8 } ] } } ] } 2. Audio Export Pipeline: 1. Engine Bounce: Serialize full project timeline state into an OfflineAudioContext. 2. Process Graph: Recreate all synth nodes, sampler audio buffers, automation ramps, and FX networks within the offline context. 3. Offline Render: Run offlineContext.startRendering() to obtain an AudioBuffer. 4. WAV Encoder: Convert AudioBuffer channels into 16-bit or 24-bit PCM WAV binary format (Blob). 5. MP3 Encoder: Encode AudioBuffer PCM data into MP3 via an embedded web worker (using WebCodecs AudioEncoder or an inline lightweight MP3 encoder like LAME JS). 6. Download Trigger: Prompt standard browser download dialog for file output (.wav, .mp3, or .project). 6. 6. Execution Instructions for Code Generation When generating the codebase: 1. Provide a scalable, modular software architecture separating Audio Engine, UI / View Layer, and State / Project Manager. 2. Write production-ready, clean, thoroughly documented code avoiding placeholder stubs for audio processing or file serialization logic. 3. Ensure zero latency artifacts by optimizing standard canvas redraw loops using requestAnimationFrame. 4. Guarantee that all audio calculations ( envelopes, modulation, matrix lookup ) use precise Web Audio API timing parameters (audioContext.currentTime) rather than standard JavaScript setInterval timers.

A system prompt was added to support web rendering