1/** Auto-generated from daw.html â Virtual Keyboard markup (no Strudel). */ 2(function (global) { 3 'use strict'; 4 global.DawDesktopMarkup = "<div id=\"daw-app-root\" class=\"daw-desktop daw-citrus\"><div id=\"daw-container\">\r\n <header id=\"toolbar\" class=\"daw-toolbar\">\r\n <div class=\"daw-toolbar__brand\">\r\n <h1 class=\"daw-toolbar__title\">Virtual Keyboard</h1>\r\n </div>\r\n\r\n <div class=\"daw-toolbar__cluster daw-toolbar__cluster--status\">\r\n <div class=\"toolbar-section daw-toolbar__volume\">\r\n <label class=\"daw-label-with-icon daw-label-with-icon--icon-only\" for=\"master-volume\" aria-label=\"Master volume\"><i class=\"fa-solid fa-volume-high\" aria-hidden=\"true\"></i></label>\r\n <input type=\"range\" id=\"master-volume\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\" aria-label=\"Master volume\">\r\n </div>\r\n <div class=\"toolbar-section daw-toolbar__midi\">\r\n <div id=\"midi-status\" class=\"midi-status\">\r\n <i class=\"fa-solid fa-keyboard\" aria-hidden=\"true\"></i>\r\n <span id=\"midi-status-text\">Octave: 4 (Z/X)</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <nav class=\"daw-toolbar__cluster daw-toolbar__cluster--menus\" aria-label=\"DAW panels\">\r\n <div class=\"toolbar-section\" id=\"settings-dropdown-container\">\r\n <button id=\"settings-dropdown-button\" class=\"toolbar-button toolbar-dropdown-btn\" type=\"button\">\r\n <i class=\"fa-solid fa-gear\" aria-hidden=\"true\"></i>\r\n <span>Settings</span>\r\n <i class=\"fa-solid fa-chevron-down daw-chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div id=\"settings-dropdown\" class=\"settings-dropdown\">\r\n <div class=\"sidebar-section\">\r\n <h3 class=\"daw-section-title\"><i class=\"fa-solid fa-gear\" aria-hidden=\"true\"></i> Settings</h3>\r\n \r\n <div class=\"control-group\">\r\n <label>A4 Frequency: <span id=\"a4-freq-value\">440</span> Hz</label>\r\n <input type=\"range\" id=\"a4-freq\" min=\"400\" max=\"480\" step=\"1\" value=\"440\">\r\n </div>\r\n \r\n <div class=\"control-group\">\r\n <label>Tuning System:</label>\r\n <select id=\"tuning-system\">\r\n <option value=\"equal\">Equal Temperament</option>\r\n <option value=\"just\">Just Intonation (C Major)</option>\r\n </select>\r\n </div>\r\n \r\n <div class=\"control-group\">\r\n <label>Max Polyphony: <span id=\"polyphony-value\">8</span></label>\r\n <input type=\"range\" id=\"polyphony\" min=\"1\" max=\"16\" step=\"1\" value=\"8\">\r\n </div>\r\n \r\n <div class=\"control-group\">\r\n <label>Velocity Curve: <span id=\"velocity-curve-value\">1.0</span></label>\r\n <input type=\"range\" id=\"velocity-curve\" min=\"0.5\" max=\"2.0\" step=\"0.1\" value=\"1.0\">\r\n </div>\r\n \r\n <div class=\"control-group\">\r\n <label>Velocity Multiplier: <span id=\"velocity-multiplier-value\">1.0</span>x</label>\r\n <input type=\"range\" id=\"velocity-multiplier\" min=\"0.1\" max=\"3.0\" step=\"0.1\" value=\"1.0\">\r\n <label style=\"font-size: 11px; color: #999; margin-top: 5px;\">\r\n Boost quiet soundfonts/synths (1.0 = normal, 2.0 = double volume)\r\n </label>\r\n </div>\r\n \r\n <div class=\"control-group\">\r\n <label>Note Priority:</label>\r\n <select id=\"note-priority\">\r\n <option value=\"oldest\">Oldest First</option>\r\n <option value=\"newest\">Newest First</option>\r\n <option value=\"lowest\">Lowest Note</option>\r\n <option value=\"highest\">Highest Note</option>\r\n </select>\r\n </div>\r\n\r\n <div class=\"control-group\">\r\n <label>\r\n <input type=\"checkbox\" id=\"show-key-labels\"> Show Keyboard Key Labels\r\n </label>\r\n </div>\r\n \r\n <div class=\"control-group\">\r\n <label style=\"display: block; margin-bottom: 8px;\">
4Background visualizer</label>\r\n <div style=\"display: flex; flex-direction: column; gap: 8px; margin-left: 4px;\">\r\n <label style=\"display: flex; align-items: center; font-weight: normal; cursor: pointer;\">\r\n <input type=\"radio\" name=\"background-visualizer-mode\" value=\"none\" checked style=\"margin-right: 8px;\"> Off\r\n </label>\r\n <label style=\"display: flex; align-items: center; font-weight: normal; cursor: pointer;\">\r\n <input type=\"radio\" name=\"background-visualizer-mode\" value=\"synesthesia\" style=\"margin-right: 8px;\"> Synesthesia (note colors)\r\n </label>\r\n <label style=\"display: flex; align-items: center; font-weight: normal; cursor: pointer;\">\r\n <input type=\"radio\" name=\"background-visualizer-mode\" value=\"spectrogram\" style=\"margin-right: 8px;\"> Spectrogram (live audio)\r\n </label>\r\n </div>\r\n <label style=\"font-size: 11px; color: #999; margin-top: 10px; display: block; margin-left: 4px;\">\r\n Synesthesia maps each note to a color; the spectrogram shows frequency energy from everything you hear (uses a little extra CPU).\r\n </label>\r\n \r\n <div id=\"synesthesia-controls\" style=\"margin-left: 24px; display: none;\">\r\n <label style=\"display: block; margin-bottom: 8px; font-size: 12px; color: #d0d0d0;\">\r\n Intensity: <span id=\"synesthesia-intensity-value\">50</span>%\r\n </label>\r\n <input type=\"range\" id=\"synesthesia-intensity\" min=\"0\" max=\"100\" value=\"50\" step=\"1\" style=\"width: 100%; margin-bottom: 12px;\">\r\n <label style=\"display: block; margin-bottom: 8px; font-size: 12px; color: #d0d0d0;\">\r\n Fade Speed: <span id=\"synesthesia-fade-value\">5</span>%\r\n </label>\r\n <input type=\"range\" id=\"synesthesia-fade\" min=\"1\" max=\"20\" value=\"5\" step=\"1\" style=\"width: 100%;\">\r\n </div>\r\n \r\n <label style=\"margin-top: 15px; display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"rgb-border-mode\" style=\"margin-right: 8px;\"> \r\n <span>RGB Rainbow Cycling</span>\r\n </label>\r\n <label style=\"font-size: 11px; color: #999; margin-top: 5px; display: block; margin-left: 24px;\">\r\n Cycles through rainbow colors on borders and ke
4yboard background\r\n </label>\r\n \r\n <div id=\"rgb-speed-controls\" style=\"margin-top: 12px; margin-left: 24px; display: none;\">\r\n <label style=\"display: block; margin-bottom: 8px; font-size: 12px; color: #d0d0d0;\">\r\n Cycle Speed: <span id=\"rgb-speed-value\">6</span>s\r\n </label>\r\n <input type=\"range\" id=\"rgb-speed-slider\" min=\"1\" max=\"15\" value=\"6\" step=\"0.5\" style=\"width: 100%;\">\r\n </div>\r\n \r\n <div id=\"static-color-controls\" style=\"margin-top: 15px;\">\r\n <label>Border Color:</label>\r\n <div style=\"display: flex; align-items: center; gap: 10px; margin-top: 8px;\">\r\n <input type=\"color\" id=\"border-color\" value=\"#ffffff\" style=\"width: 60px; height: 36px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); background: #252530;\">\r\n <input type=\"text\" id=\"border-color-text\" value=\"#ffffff\" placeholder=\"#ffffff\" style=\"flex: 1; padding: 8px 12px; background: #252530; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; color: #e8e8e8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px;\">\r\n <button id=\"reset-border-color\" class=\"daw-icon-btn daw-inline-action-btn\" type=\"button\"><i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i><span>Reset</span></button>\r\n </div>\r\n <label style=\"font-size: 11px; color: #999; margin-top: 5px; display: block;\">\r\n Changes border color of Virtual Keyboard and UI elements\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-section\" id=\"sounds-dropdown-container\">\r\n <button id=\"sounds-dropdown-button\" class=\"toolbar-button toolbar-dropdown-btn\" type=\"button\">\r\n <i class=\"fa-solid fa-compact-disc\" aria-hidden=\"true\"></i>\r\n <span>Sounds</span>\r\n <i class=\"fa-solid fa-chevron-down daw-chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div id=\"sounds-dropdown\" class=\"sounds-dropdown\">\r\n <div class=\"sidebar-section\">\r\n <h3 class=\"daw-section-title\"><i class=\"fa-solid fa-compact-disc\" aria-hidden=\"true\"></i> Soundfonts</h3>\r\n \r\n <div class=\"control-group\">\r\n <label>Select Instrument:</label>\r\n <select id=\"soundfont-select\" size=\"15\">\r\n <!-- Options will be dynamically populated by JavaScript -->\r\n </select>\r\n </div>\r\n \r\n <div class=\"control-group\" style=\"margin-top: 15px;\">\r\n <label>\r\n <input type=\"checkbox\" id=\"show-synthesized\" style=\"margin-right: 8px;\">\r\n Show Synthesized Instruments\r\n </label>\r\n </div>\r\n \r\n <div class=\"control-group\" style=\"margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1);\">\r\n <label class=\"daw-label-with-icon\" style=\"font-size: 13px; color: #d0d0d0; font-weight: 500;\"><i class=\"fa-solid fa-file-arrow-up\" aria-hidden=\"true\"></i> Load Custom SF2 File</label>\r\n <div style=\"display: flex; gap: 8px; margin-top: 8px;\">\r\n <input type=\"file\" id=\"custom-sf2-input\" accept=\".sf2\" style=\"flex: 1; padding: 8px 12px; background: #252530; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; color: #e8e8e8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; cursor: pointer;\">\r\n <button id=\"clear-sf2-input\" class=\"toolbar-button daw-icon-btn\" type=\"button\" style=\"padding: 8px 16px; font-size: 12px; min-height: auto; min-width: auto; white-space: nowrap;\" title=\"Clear file selection\"><i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i><span>Clear</span></button>\r\n </div>\r\n <label style=\"font-size: 11px; color: #999; display: block; margin-top: 5px;\">\r\n Select a .sf2 SoundFont file from your computer\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-section\" id=\"scales-dropdown-container\">\r\n <button id=\"scales-dropdown-button\" class=\"toolbar-button toolbar-dropdown-btn\" type=\"button\">\r\n <i class=\"fa-solid fa-music\" aria-hidden=\"true\"></i>
4\r\n <span>Scales</span>\r\n <i class=\"fa-solid fa-chevron-down daw-chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div id=\"scales-dropdown\" class=\"scales-dropdown\">\r\n <div class=\"sidebar-section\">\r\n <h3 class=\"daw-section-title\"><i class=\"fa-solid fa-music\" aria-hidden=\"true\"></i> Scales & Modes</h3>\r\n \r\n <div class=\"control-group\">\r\n <label>Select Scale/Mode:</label>\r\n <select id=\"scale-select\">\r\n <option value=\"\">None (All Notes)</option>\r\n <optgroup label=\"Major Scales\">\r\n <option value=\"C-major\">C Major</option>\r\n <option value=\"C#-major\">C# Major</option>\r\n <option value=\"D-major\">D Major</option>\r\n <option value=\"D#-major\">D# Major</option>\r\n <option value=\"E-major\">E Major</option>\r\n <option value=\"F-major\">F Major</option>\r\n <option value=\"F#-major\">F# Major</option>\r\n <option value=\"G-major\">G Major</option>\r\n <option value=\"G#-major\">G# Major</option>\r\n <option value=\"A-major\">A Major</option>\r\n <option value=\"A#-major\">A# Major</option>\r\n <option value=\"B-major\">B Major</option>\r\n </optgroup>\r\n <optgroup label=\"Natural Minor Scales\">\r\n <option value=\"C-minor\">C Minor</option>\r\n <option value=\"C#-minor\">C# Minor</option>\r\n <option value=\"D-minor\">D Minor</option>\r\n <option value=\"D#-minor\">D# Minor</option>\r\n <option value=\"E-minor\">E Minor</option>\r\n <option value=\"F-minor\">F Minor</option>\r\n <option value=\"F#-minor\">F# Minor</option>\r\n <option value=\"G-minor\">G Minor</option>\r\n <option value=\"G#-minor\">G# Minor</option>\r\n <option value=\"A-minor\">A Minor</option>\r\n <option value=\"A#-minor\">A# Minor</option>\r\n <option value=\"B-minor\">B Minor</option>\r\n </optgroup>\r\n <optgroup label=\"Harmonic Minor Scales\">\r\n <option value=\"C-harmonic-minor\">C Harmonic Minor</option>\r\n <option value=\"C#-harmonic-minor\">C# Harmonic Minor</option>\r\n <option value=\"D-harmonic-minor\">D Harmonic Minor</option>\r\n <option value=\"D#-harmonic-minor\">D# Harmonic Minor</option>\r\n <option value=\"E-harmonic-minor\">E Harmonic Minor</option>\r\n <option value=\"F-harmonic-minor\">F Harmonic Minor</option>\r\n <option value=\"F#-harmonic-minor\">F# Harmonic Minor</option>\r\n <option value=\"G-harmonic-minor\">G Harmonic Minor</option>\r\n <option value=\"G#-harmonic-minor\">G# Harmonic Minor</option>\r\n <option value=\"A-harmonic-minor\">A Harmonic Minor</option>\r\n <option value=\"A#-harmonic-minor\">A# Harmonic Minor</option>\r\n <option value=\"B-harmonic-minor\">B Harmonic Minor</option>\r\n </optgroup>\r\n <optgroup label=\"Melodic Minor Scales\">\r\n <option value=\"C-melodic-minor\">C Melodic Minor</option>\r\n <option value=\"C#-melodic-minor\">C# Melodic Minor</option>\r\n <option value=\"D-melodic-minor\">D Melodic Minor</option>\r\n <option value=\"D#-melodic-minor\">D# Melodic Minor</option>\r\n <option value=\"E-melodic-minor\">E Melodic Minor</option>\r\n <option value=\"F-melodic-minor\">F Melodic Minor</option>\r\n <option value=\"F#-melodic-minor\">F# Melodic Minor</option>\r\n <option value=\"G-melodic-minor\">G Melodic Minor</option>\r\n <option value=\"G#-melodic-minor\">G# Melodic Minor</option>\r\n <option value=\"A-melodic-minor\">A Melodic Minor</option>\r\n <option value=\"A#-melodic-minor\">A# Melodic Minor</option>\r\n <option value=\"B-melodic-minor\">B Melodic Minor</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (C Root)\">\r\n <option value=\"C-ionian\">C Ionian (Major)</option>\r\n <option value=\"C-dorian\">C Dorian</option>\r\n <option value=\"C-phrygian\">C Phrygian</option>\r\n <option value=\"C-lydian\">C Lydian</option>\r\n <option value=\"C-mixolydian\">C Mixolydian</option>\r\n <option value=\"C-aeolian\">C Aeolian (Natural Minor)</option>\r\n <option value=\"C-locrian\">C Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (C# Root)\">\r\n <option value=\"C#-ionian\">C# Ionian (Major)</option>\r\n <option value=\"C#-dorian\">C# Dorian</option>\r\n <option value=\"C#-phrygian\">C# Phrygian</option>\r\n <option value=\"C#-lydian\">C# Lydian</option>\r\n <option value=\"C#-mixolydian\">C# Mixolydian</option>\r\n <option value=\"C#-aeolian\">C# Aeolian (Natural Minor)</option>\r\n <option value=\"C#-locrian\">C# Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (D Root)\">\r\n <option value=\"D-ionian\">D Ionian (Major)</option>\r\n <option value=\"D-dorian\">D Dorian</option>\r\n <option value=\"D-phrygian\">D Phrygian</option>\r\n <option value=\"D-lydian\">D Lydian</option>\r\n <option value=\"D-mixolydian\">D Mixolydian</option>\r\n <option value=\"D-aeolian\">D Aeolian (Natural Minor)</option>\r\n <option value=\"D-locrian\">D Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (D# Root)\">\r\n <option value=\"D#-ionian\">D# Ionian (Major)</option>\r\n <option value=\"D#-dorian\">D# Dorian</option>\r\n <option value=\"D#-phrygian\">D# Phrygian</option>\r\n <option value=\"D#-lydian\">D# Lydian</option>\r\n <option value=\"D#-mixolydian\">D# Mixolydian</option>\r\n <option value=\"D#-aeolian\">D# Aeolian (Natural Minor)</option>\r\n <option value=\"D#-locrian\">D# Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (E Root)\">\r\n <option value=\"E-ionian\">E Ionian (Major)</option>\r\n <option value=\"E-dorian\">E Dorian</option>\r\n <option value=\"E-phrygian\">E Phrygian</option>\r\n <option value=\"E-lydian\">E Lydian</option>\r\n <option value=\"E-mixolydian\">E Mixolydian</option>\r\n <option value=\"E-aeolian\">E Aeolian (Natural Minor)</option>\r\n <option value=\"E-locrian\">E Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (F Root)\">\r\n <option value=\"F-ionian\">F Ionian (Major)</option>\r\n <option value=\"F-dorian\">F Dorian</option>\r\n <option value=\"F-phrygian\">F Phrygian</option>\r\n <option value=\"F-lydian\">F Lydian</option>\r\n <option value=\"F-mixolydian\">F Mixolydian</option>\r\n <option value=\"F-aeolian\">F Aeolian (Natural Minor)</option>\r\n <option value=\"F-locrian\">F Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (F# Root)\">\r\n <option value=\"F#-ionian\">F# Ionian (Major)</option>\r\n <option value=\"F#-dorian\">F# Dorian</option>\r\n <option value=\"F#-phrygian\">F# Phrygian</option>\r\n <option value=\"F#-lydian\">F# Lydian</option>\r\n <option value=\"F#-mixolydian\">F# Mixolydian</option>\r\n <option value=\"F#-aeolian\">F# Aeolian (Natural Minor)</option>\r\n <option value=\"F#-locrian\">F# Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (G Root)\">\r\n <option value=\"G-ionian\">G Ionian (Major)</option>\r\n <option value=\"G-dorian\">G Dorian</option>\r\n <option value=\"G-phrygian\">G Phrygian</option>\r\n <option value=\"G-lydian\">G Lydian</option>\r\n <option value=\"G-mixoly
4dian\">G Mixolydian</option>\r\n <option value=\"G-aeolian\">G Aeolian (Natural Minor)</option>\r\n <option value=\"G-locrian\">G Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (G# Root)\">\r\n <option value=\"G#-ionian\">G# Ionian (Major)</option>\r\n <option value=\"G#-dorian\">G# Dorian</option>\r\n <option value=\"G#-phrygian\">G# Phrygian</option>\r\n <option value=\"G#-lydian\">G# Lydian</option>\r\n <option value=\"G#-mixolydian\">G# Mixolydian</option>\r\n <option value=\"G#-aeolian\">G# Aeolian (Natural Minor)</option>\r\n <option value=\"G#-locrian\">G# Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (A Root)\">\r\n <option value=\"A-ionian\">A Ionian (Major)</option>\r\n <option value=\"A-dorian\">A Dorian</option>\r\n <option value=\"A-phrygian\">A Phrygian</option>\r\n <option value=\"A-lydian\">A Lydian</option>\r\n <option value=\"A-mixolydian\">A Mixolydian</option>\r\n <option value=\"A-aeolian\">A Aeolian (Natural Minor)</option>\r\n <option value=\"A-locrian\">A Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (A# Root)\">\r\n <option value=\"A#-ionian\">A# Ionian (Major)</option>\r\n <option value=\"A#-dorian\">A# Dorian</option>\r\n <option value=\"A#-phrygian\">A# Phrygian</option>\r\n <option value=\"A#-lydian\">A# Lydian</option>\r\n <option value=\"A#-mixolydian\">A# Mixolydian</option>\r\n <option value=\"A#-aeolian\">A# Aeolian (Natural Minor)</option>\r\n <option value=\"A#-locrian\">A# Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Modes (B Root)\">\r\n <option value=\"B-ionian\">B Ionian (Major)</option>\r\n <option value=\"B-dorian\">B Dorian</option>\r\n <option value=\"B-phrygian\">B Phrygian</option>\r\n <option value=\"B-lydian\">B Lydian</option>\r\n <option value=\"B-mixolydian\">B Mixolydian</option>\r\n <option value=\"B-aeolian\">B Aeolian (Natural Minor)</option>\r\n <option value=\"B-locrian\">B Locrian</option>\r\n </optgroup>\r\n <optgroup label=\"Other Scales\">\r\n <option value=\"C-pentatonic-major\">C Pentatonic Major</option>\r\n <option value=\"C-pentatonic-minor\">C Pentatonic Minor</option>\r\n <option value=\"C-blues\">C Blues Scale</option>\r\n <option value=\"C-whole-tone\">C Whole Tone</option>\r\n <option value=\"C-diminished\">C Diminished (Octatonic)</option>\r\n </optgroup>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-section\" id=\"effects-dropdown-container\">\r\n <button id=\"effects-dropdown-button\" class=\"toolbar-button toolbar-dropdown-btn\" type=\"button\">\r\n <i class=\"fa-solid fa-sliders\" aria-hidden=\"true\"></i>
4\r\n <span>Effects</span>\r\n <i class=\"fa-solid fa-chevron-down daw-chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div id=\"effects-dropdown\" class=\"effects-dropdown\">\r\n <div class=\"sidebar-section\">\r\n <h3 class=\"daw-section-title\"><i class=\"fa-solid fa-sliders\" aria-hidden=\"true\"></i> Effects</h3>\r\n\r\n <!-- Arpeggiator -->\r\n <div class=\"control-group arp-effect-block\">\r\n <label>\r\n <input type=\"checkbox\" id=\"arp-enabled\"> Arpeggiator\r\n </label>\r\n <div id=\"arp-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>BPM: <span id=\"arp-bpm-value\">120</span></label>\r\n <input type=\"range\" id=\"arp-bpm\" min=\"40\" max=\"200\" step=\"1\" value=\"120\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Chord:</label>\r\n <select id=\"arp-chord\">\r\n <option value=\"major\">Major</option>\r\n <option value=\"minor\">Minor</option>\r\n <option value=\"maj7\">Major 7</option>\r\n <option value=\"min7\">Minor 7</option>\r\n <option value=\"dom7\">Dominant 7</option>\r\n <option value=\"sus2\">Sus2</option>\r\n <option value=\"sus4\">Sus4</option>\r\n <option value=\"dim\">Diminished</option>\r\n <option value=\"aug\">Augmented</option>\r\n </select>\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Order:</label>\r\n <select id=\"arp-pattern\">\r\n <option value=\"up\">Up</option>\r\n <option value=\"down\">Down</option>\r\n <option value=\"updown\">Up & Down</option>\r\n <option value=\"order\">As Voiced</option>\r\n <option value=\"random\">Random</option>\r\n </select>\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Octaves: <span id=\"arp-octaves-value\">1</span></label>\r\n <input type=\"range\" id=\"arp-octaves\" min=\"1\" max=\"3\" step=\"1\" value=\"1\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Reverb -->\r\n <div class=\"control-group effect-item\" data-effect=\"reverb\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-reverb\"> Reverb\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"reverb\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"reverb\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>
4\r\n <div id=\"reverb-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Room Size: <span id=\"reverb-room-value\">0.5</span></label>\r\n <input type=\"range\" id=\"reverb-room\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Dampening: <span id=\"reverb-damp-value\">0.5</span></label>\r\n <input type=\"range\" id=\"reverb-damp\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.5\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Delay -->\r\n <div class=\"control-group effect-item\" data-effect=\"delay\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-delay\"> Delay\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"delay\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"delay\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"delay-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Time: <span id=\"delay-time-value\">0.3</span>s</label>\r\n <input type=\"range\" id=\"delay-time\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Feedback: <span id=\"delay-feedback-value\">0.3</span></label>\r\n <input type=\"range\" id=\"delay-feedback\" min=\"0\" max=\"0.95\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Mix: <span id=\"delay-mix-value\">0.3</span></label>\r\n <input type=\"range\" id=\"delay-mix\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Distortion -->\r\n <div class=\"control-group effect-item\" data-effect=\"distortion\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-distortion\"> Distortion\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"distortion\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"distortion\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"distortion-controls\" class=\"effect-control
4s\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Amount: <span id=\"distortion-amount-value\">0.5</span></label>\r\n <input type=\"range\" id=\"distortion-amount\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.5\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Chorus -->\r\n <div class=\"control-group effect-item\" data-effect=\"chorus\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-chorus\"> Chorus\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"chorus\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"chorus\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"chorus-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Rate: <span id=\"chorus-rate-value\">1.5</span> Hz</label>\r\n <input type=\"range\" id=\"chorus-rate\" min=\"0.1\" max=\"5\" step=\"0.1\" value=\"1.5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Depth: <span id=\"chorus-depth-value\">0.3</span></label>\r\n <input type=\"range\" id=\"chorus-depth\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Feedback: <span id=\"chorus-feedback-value\">0.2</span></label>\r\n <input type=\"range\" id=\"chorus-feedback\" min=\"0\" max=\"0.9\" step=\"0.01\" value=\"0.2\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Phaser -->\r\n <div class=\"control-group effect-item\" data-effect=\"phaser\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-phaser\"> Phaser\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"phaser\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"phaser\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"phaser-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Rate: <span id=\"phaser-rate-value\">0.5</span> Hz</label>\r\n <input type=\"range\" id=\"phaser-rate\" min=\"0.1\" max=\"5\" step=\"0.1\" value=\"0.5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Depth: <span id=\"phaser-depth-value\">0.6</span></label>\r\n <input type=\"range\" id=\"phaser-depth\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.6\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Feedback: <span id=\"phaser-feedback-value\">0.3</span></label>\r\n <input type=\"range\" id=\"phaser-feedback\" min=\"0\" max=\"0.9\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Filter -->\r\n <div class=\"control-group effect-item\" data-effect=\"filter\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">
4\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-filter\"> Filter\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"filter\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"filter\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"filter-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Type:</label>\r\n <select id=\"filter-type\">\r\n <option value=\"lowpass\">Lowpass</option>\r\n <option value=\"highpass\">Highpass</option>\r\n <option value=\"bandpass\">Bandpass</option>\r\n <option value=\"notch\">Notch</option>\r\n </select>\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Frequency: <span id=\"filter-freq-value\">2000</span> Hz</label>\r\n <input type=\"range\" id=\"filter-freq\" min=\"20\" max=\"20000\" step=\"10\" value=\"2000\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Resonance: <span id=\"filter-res-value\">1</span></label>\r\n <input type=\"range\" id=\"filter-res\" min=\"0.1\" max=\"20\" step=\"0.1\" value=\"1\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Compressor -->\r\n <div class=\"control-group effect-item\" data-effect=\"compressor\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-compressor\"> Compressor\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"compressor\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"compressor\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"compressor-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Threshold: <span id=\"compressor-threshold-value\">-24</span> dB</label>\r\n <input type=\"range\" id=\"compressor-threshold\" min=\"-60\" max=\"0\" step=\"1\" value=\"-24\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Ratio: <span id=\"compressor-ratio-value\">4</span>:1</label>\r\n <input type=\"range\" id=\"compressor-ratio\" min=\"1\" max=\"20\" step=\"0.5\" value=\"4\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Knee: <span id=\"compressor-knee-value\">30</span></label>\r\n <input type=\"range\" id=\"compressor-knee\" min=\"0\" max=\"40\" step=\"1\" value=\"30\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Attack: <span id=\"compressor-attack-value\">0.003</span>s</label>\r\n <input type=\"range\" id=\"compressor-attack\" min=\"0\" max=\"1\" step=\"0.001\" value=\"0.003\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Release: <span id=\"compressor-release-value\">0.25</span>s</label>\r\n <input type=\"range\" id=\"compressor-release\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.25\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Tremolo -->\r\n <div class=\"control-group effect-item\" data-effect=\"tremolo\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">
4\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-tremolo\"> Tremolo\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"tremolo\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"tremolo\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"tremolo-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Rate: <span id=\"tremolo-rate-value\">5</span> Hz</label>\r\n <input type=\"range\" id=\"tremolo-rate\" min=\"0.1\" max=\"20\" step=\"0.1\" value=\"5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Depth: <span id=\"tremolo-depth-value\">0.5</span></label>\r\n <input type=\"range\" id=\"tremolo-depth\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Waveform:</label>\r\n <select id=\"tremolo-waveform\">\r\n <option value=\"sine\">Sine</option>\r\n <option value=\"square\">Square</option>\r\n <option value=\"triangle\">Triangle</option>\r\n <option value=\"sawtooth\">Sawtooth</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Vibrato -->\r\n <div class=\"control-group effect-item\" data-effect=\"vibrato\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-vibrato\"> Vibrato\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"vibrato\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"vibrato\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"vibrato-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Rate: <span id=\"vibrato-rate-value\">5</span> Hz</label>\r\n <input type=\"range\" id=\"vibrato-rate\" min=\"0.1\" max=\"20\" step=\"0.1\" value=\"5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Depth: <span id=\"vibrato-depth-value\">0.1</span> semitones</label>\r\n <input type=\"range\" id=\"vibrato-depth\" min=\"0\" max=\"2\" step=\"0.01\" value=\"0.1\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Bitcrusher -->\r\n <div class=\"control-group effect-item\" data-effect=\"bitcrusher\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">
4\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-bitcrusher\"> Bitcrusher\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"bitcrusher\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"bitcrusher\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"bitcrusher-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Bit Depth: <span id=\"bitcrusher-bits-value\">8</span> bits</label>\r\n <input type=\"range\" id=\"bitcrusher-bits\" min=\"1\" max=\"16\" step=\"1\" value=\"8\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Sample Rate Reduction: <span id=\"bitcrusher-sr-value\">1</span></label>\r\n <input type=\"range\" id=\"bitcrusher-sr\" min=\"1\" max=\"16\" step=\"1\" value=\"1\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Mix: <span id=\"bitcrusher-mix-value\">1.0</span></label>\r\n <input type=\"range\" id=\"bitcrusher-mix\" min=\"0\" max=\"1\" step=\"0.01\" value=\"1.0\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Ring Modulator -->\r\n <div class=\"control-group effect-item\" data-effect=\"ringmod\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-ringmod\"> Ring Modulator\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"ringmod\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"ringmod\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"ringmod-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Frequency: <span id=\"ringmod-freq-value\">100</span> Hz</label>\r\n <input type=\"range\" id=\"ringmod-freq\" min=\"20\" max=\"2000\" step=\"1\" value=\"100\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Mix: <span id=\"ringmod-mix-value\">0.5</span></label>\r\n <input type=\"range\" id=\"ringmod-mix\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.5\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Flanger -->\r\n <div class=\"control-group effect-item\" data-effect=\"flanger\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">
4\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-flanger\"> Flanger\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"flanger\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"flanger\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"flanger-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Rate: <span id=\"flanger-rate-value\">0.5</span> Hz</label>\r\n <input type=\"range\" id=\"flanger-rate\" min=\"0.1\" max=\"5\" step=\"0.1\" value=\"0.5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Depth: <span id=\"flanger-depth-value\">0.3</span></label>\r\n <input type=\"range\" id=\"flanger-depth\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Feedback: <span id=\"flanger-feedback-value\">0.3</span></label>\r\n <input type=\"range\" id=\"flanger-feedback\" min=\"-0.95\" max=\"0.95\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Delay: <span id=\"flanger-delay-value\">0.005</span>s</label>\r\n <input type=\"range\" id=\"flanger-delay\" min=\"0.001\" max=\"0.02\" step=\"0.001\" value=\"0.005\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Auto-Wah -->\r\n <div class=\"control-group effect-item\" data-effect=\"autowah\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-autowah\"> Auto-Wah\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"autowah\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"autowah\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"autowah-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Sensitivity: <span id=\"autowah-sensitivity-value\">0.5</span></label>\r\n <input type=\"range\" id=\"autowah-sensitivity\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Frequency Range: <span id=\"autowah-range-value\">2000</span> Hz</label>\r\n <input type=\"range\" id=\"autowah-range\" min=\"500\" max=\"5000\" step=\"10\" value=\"2000\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Resonance: <span id=\"autowah-res-value\">5</span></label>\r\n <input type=\"range\" id=\"autowah-res\" min=\"1\" max=\"20\" step=\"0.1\" value=\"5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Attack: <span id=\"autowah-attack-value\">0.01</span>s</label>\r\n <input type=\"range\" id=\"autowah-attack\" min=\"0\" max=\"0.1\" step=\"0.001\" value=\"0.01\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Release: <span id=\"autowah-release-value\">0.1</span>s</label>\r\n <input type=\"range\" id=\"autowah-release\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.1\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Pitch Shifter -->\r\n <div class=\"control-group effect-item\" data-effect=\"pitchshift\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">
4\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-pitchshift\"> Pitch Shifter\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"pitchshift\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"pitchshift\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"pitchshift-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Semitones: <span id=\"pitchshift-semitones-value\">0</span></label>\r\n <input type=\"range\" id=\"pitchshift-semitones\" min=\"-12\" max=\"12\" step=\"1\" value=\"0\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Cents: <span id=\"pitchshift-cents-value\">0</span></label>\r\n <input type=\"range\" id=\"pitchshift-cents\" min=\"-50\" max=\"50\" step=\"1\" value=\"0\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Echo -->\r\n <div class=\"control-group effect-item\" data-effect=\"echo\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-echo\"> Echo\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"echo\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"echo\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"echo-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Delay Time: <span id=\"echo-time-value\">0.25</span>s</label>\r\n <input type=\"range\" id=\"echo-time\" min=\"0.05\" max=\"1\" step=\"0.01\" value=\"0.25\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Feedback: <span id=\"echo-feedback-value\">0.4</span></label>\r\n <input type=\"range\" id=\"echo-feedback\" min=\"0\" max=\"0.9\" step=\"0.01\" value=\"0.4\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Mix: <span id=\"echo-mix-value\">0.3</span></label>\r\n <input type=\"range\" id=\"echo-mix\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Overdrive -->\r\n <div class=\"control-group effect-item\" data-effect=\"overdrive\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">
4\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-overdrive\"> Overdrive\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"overdrive\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"overdrive\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"overdrive-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Drive: <span id=\"overdrive-drive-value\">0.3</span></label>\r\n <input type=\"range\" id=\"overdrive-drive\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Tone: <span id=\"overdrive-tone-value\">0.5</span></label>\r\n <input type=\"range\" id=\"overdrive-tone\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Level: <span id=\"overdrive-level-value\">0.7</span></label>\r\n <input type=\"range\" id=\"overdrive-level\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.7\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Fuzz -->\r\n <div class=\"control-group effect-item\" data-effect=\"fuzz\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-fuzz\"> Fuzz\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"fuzz\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"fuzz\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"fuzz-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Intensity: <span id=\"fuzz-intensity-value\">0.6</span></label>\r\n <input type=\"range\" id=\"fuzz-intensity\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.6\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Gate: <span id=\"fuzz-gate-value\">0.3</span></label>\r\n <input type=\"range\" id=\"fuzz-gate\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Mix: <span id=\"fuzz-mix-value\">0.8</span></label>\r\n <input type=\"range\" id=\"fuzz-mix\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Stereo Widener -->\r\n <div class=\"control-group effect-item\" data-effect=\"stereowidener\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">
4\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-stereowidener\"> Stereo Widener\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"stereowidener\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"stereowidener\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"stereowidener-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Width: <span id=\"stereowidener-width-value\">0.5</span></label>\r\n <input type=\"range\" id=\"stereowidener-width\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Balance: <span id=\"stereowidener-balance-value\">0</span></label>\r\n <input type=\"range\" id=\"stereowidener-balance\" min=\"-1\" max=\"1\" step=\"0.01\" value=\"0\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Exciter -->\r\n <div class=\"control-group effect-item\" data-effect=\"exciter\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-exciter\"> Exciter\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"exciter\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"exciter\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>
4\r\n <div id=\"exciter-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Amount: <span id=\"exciter-amount-value\">0.3</span></label>\r\n <input type=\"range\" id=\"exciter-amount\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Frequency: <span id=\"exciter-freq-value\">5000</span> Hz</label>\r\n <input type=\"range\" id=\"exciter-freq\" min=\"2000\" max=\"20000\" step=\"100\" value=\"5000\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Noise Gate -->\r\n <div class=\"control-group effect-item\" data-effect=\"noisegate\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-noisegate\"> Noise Gate\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"noisegate\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"noisegate\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>\r\n <div id=\"noisegate-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Threshold: <span id=\"noisegate-threshold-value\">-40</span> dB</label>\r\n <input type=\"range\" id=\"noisegate-threshold\" min=\"-60\" max=\"-10\" step=\"1\" value=\"-40\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Attack: <span id=\"noisegate-attack-value\">0.001</span>s</label>\r\n <input type=\"range\" id=\"noisegate-attack\" min=\"0\" max=\"0.01\" step=\"0.001\" value=\"0.001\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Release: <span id=\"noisegate-release-value\">0.1</span>s</label>\r\n <input type=\"range\" id=\"noisegate-release\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.1\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Limiter -->\r\n <div class=\"control-group effect-item\" data-effect=\"limiter\">\r\n <label style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n <span style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"effect-limiter\"> Limiter\r\n </span>\r\n <span class=\"effect-order-controls\" style=\"display: flex; gap: 4px;\">\r\n <button class=\"effect-order-btn effect-order-up\" data-effect=\"limiter\" aria-label=\"Move up\"><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\r\n <button class=\"effect-order-btn effect-order-down\" data-effect=\"limiter\" aria-label=\"Move down\"><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\r\n </span>\r\n </label>
4\r\n <div id=\"limiter-controls\" class=\"effect-controls\" style=\"display: none;\">\r\n <div class=\"control-group\">\r\n <label>Threshold: <span id=\"limiter-threshold-value\">-3</span> dB</label>\r\n <input type=\"range\" id=\"limiter-threshold\" min=\"-12\" max=\"0\" step=\"0.5\" value=\"-3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Release: <span id=\"limiter-release-value\">0.1</span>s</label>\r\n <input type=\"range\" id=\"limiter-release\" min=\"0.01\" max=\"1\" step=\"0.01\" value=\"0.1\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </header>\r\n\r\n <div id=\"daw-workspace\" class=\"daw-workspace\">\r\n <!-- Main Content Area -->\r\n <div id=\"main-content\">\r\n <!-- Sidebar Toggle Button -->\r\n <button id=\"sidebar-toggle\" type=\"button\" aria-label=\"Toggle sidebar\"><i class=\"fa-solid fa-chevron-left\" aria-hidden=\"true\"></i></button>\r\n \r\n <!-- Left Sidebar - Synth Controls -->\r\n <div id=\"synth-sidebar\">\r\n <div class=\"sidebar-section\">\r\n <h3 class=\"daw-section-title\"><i class=\"fa-solid fa-wave-square\" aria-hidden=\"true\"></i> Synthesizer</h3>\r\n <div class=\"control-group\">\r\n <label>Waveform:</label>\r\n <select id=\"synth-waveform\">\r\n <option value=\"sine\">Sine</option>\r\n <option value=\"square\">Square</option>\r\n <option value=\"sawtooth\">Sawtooth</option>\r\n <option value=\"triangle\">Triangle</option>\r\n <option value=\"pulse\">Pulse</option>\r\n <option value=\"pwm\">PWM (Pulse Width Modulation)</option>\r\n </select>\r\n </div>\r\n <div class=\"control-group\" id=\"pulse-width-control\" style=\"display: none;\">\r\n <label>Pulse Width: <span id=\"pulse-width-value\">0.5</span></label>\r\n <input type=\"range\" id=\"synth-pulse-width\" min=\"0.01\" max=\"0.99\" step=\"0.01\" value=\"0.5\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Attack: <span id=\"attack-value\">0.01</span>s</label>\r\n <input type=\"range\" id=\"synth-attack\" min=\"0\" max=\"5\" step=\"0.01\" value=\"0.01\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Decay: <span id=\"decay-value\">0.1</span>s</label>\r\n <input type=\"range\" id=\"synth-decay\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.1\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Sustain: <span id=\"sustain-value\">0.7</span></label>\r\n <input type=\"range\" id=\"synth-sustain\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.7\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Release: <span id=\"release-value\">0.3</span>s</label>\r\n <input type=\"range\" id=\"synth-release\" min=\"0\" max=\"5\" step=\"0.01\" value=\"0.3\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Filter Cutoff: <span id=\"filter-cutoff-value\">8000</span> Hz</label>\r\n <input type=\"range\" id=\"synth-filter-cutoff\" min=\"80\" max=\"12000\" step=\"10\" value=\"8000\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Filter Resonance: <span id=\"filter-resonance-value\">1.0</span></label>\r\n <input type=\"range\" id=\"synth-filter-resonance\" min=\"0.1\" max=\"20\" step=\"0.1\" value=\"1\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Filter Envelope Decay: <span id=\"filter-decay-value\">0.20</span>s</label>\r\n <input type=\"range\" id=\"synth-filter-decay\" min=\"0.01\" max=\"1\" step=\"0.01\" value=\"0.2\">\r\n </div>\r\n <div class=\"control-group\">\r\n <label>Filter Envelope Amount: <span id=\"filter-octaves-value\">2.0</span> oct</label>\r\n <input type=\"range\" id=\"synth-filter-octaves\" min=\"0\" max=\"6\" step=\"0.1\" value=\"2\">\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Center - Virtual Keyboard (Main Focus) -->\r\n <div id=\"keyboard-container\">\r\n <div id=\"virtual-keyboard\" class=\"virtual-keyboard\"></div>\r\n <div id=\"chord-display\" class=\"chord-display\"></div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div></div>"; 5})(typeof window !== 'undefined' ? window : this);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.