Spaces:

SREAL
/

synthwave-studio

Running

App Files Files Community

SREAL commited on Oct 22, 2025

Commit

bd19cec

verified ·

1 Parent(s): 2aef604

get rid of all the extra pages, lets just get rid of the sequencer and give the program a more 'synth-like' layout. also, add more capability for the envelope, I want a visual adsr editor and multi-stage lowpass filtering. give it a more shaped 'oscilloscope/matrix style aesthetic (similar to the photo attached)

Browse files

Files changed (3) hide show

index.html +150 -111
script.js +184 -29
style.css +78 -32

index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -9,148 +10,186 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
-<body class="bg-gray-900 text-white min-h-screen">
-    <custom-navbar></custom-navbar>
     <div class="container mx-auto px-4 py-8">
-        <header class="text-center mb-12">
-            <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-gray-400 to-white bg-clip-text text-transparent">
-                SynthWave Studio
             </h1>
-            <p class="text-gray-400 text-lg max-w-2xl mx-auto">
-                Polyphonic MIDI synthesizer with velocity-sensitive controls, filters, and effects
-            </p>
         </header>
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
-            <!-- Synthesizer Controls -->
-            <div class="lg:col-span-2 bg-gray-800 rounded-xl p-6 shadow-2xl">
-                <h2 class="text-2xl font-bold mb-6 text-gray-300 flex items-center">
-                    <i data-feather="sliders" class="mr-2"></i> Synthesizer Controls
-                </h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <!-- Oscillator Section -->
-                    <div class="bg-gray-700 rounded-lg p-4">
-                        <h3 class="font-semibold mb-3 text-gray-300">Oscillator</h3>
-                        <div class="space-y-4">
-                            <div>
-                                <label class="block text-sm text-gray-400 mb-1">Type</label>
-                                <select id="oscillator-type" class="w-full bg-gray-600 text-white rounded p-2">
-                                    <option value="sawtooth">Sawtooth</option>
-                                    <option value="sine">Sine</option>
-                                    <option value="square">Square</option>
-                                    <option value="triangle">Triangle</option>
-                                </select>
-                            </div>
-                        </div>
                     </div>
-                    <!-- Filter Section -->
-                    <div class="bg-gray-700 rounded-lg p-4">
-                        <h3 class="font-semibold mb-3 text-gray-300">Filter</h3>
-                        <div class="space-y-4">
-                            <div>
-                                <label class="block text-sm text-gray-400 mb-1">Cutoff Frequency</label>
-                                <input type="range" id="filter-frequency" min="50" max="5000" value="1000" step="1"
-                                       class="w-full accent-gray-500">
-                                <span id="filter-frequency-value" class="text-xs text-gray-400">1000 Hz</span>
-                            </div>
-                            <div>
-                                <label class="block text-sm text-gray-400 mb-1">Resonance</label>
-                                <input type="range" id="filter-q" min="0.1" max="10" value="1" step="0.1"
-                                       class="w-full accent-gray-500">
-                                <span id="filter-q-value" class="text-xs text-gray-400">1.0</span>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Envelope Section -->
-                    <div class="bg-gray-700 rounded-lg p-4">
-                        <h3 class="font-semibold mb-3 text-gray-300">Envelope</h3>
-                        <div class="space-y-4">
-                            <div>
-                                <label class="block text-sm text-gray-400 mb-1">Attack</label>
-                                <input type="range" id="envelope-attack" min="0.01" max="2" value="0.1" step="0.01"
-                                       class="w-full accent-gray-500">
-                                <span id="envelope-attack-value" class="text-xs text-gray-400">0.1 s</span>
-                            </div>
-                            <div>
-                                <label class="block text-sm text-gray-400 mb-1">Release</label>
-                                <input type="range" id="envelope-release" min="0.1" max="5" value="0.5" step="0.1"
-                                       class="w-full accent-gray-500">
-                                <span id="envelope-release-value" class="text-xs text-gray-400">0.5 s</span>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Effects Section -->
-                    <div class="bg-gray-700 rounded-lg p-4">
-                        <h3 class="font-semibold mb-3 text-gray-300">Effects</h3>
-                        <div class="space-y-4">
-                            <div>
-                                <label class="block text-sm text-gray-400 mb-1">Reverb</label>
-                                <input type="range" id="reverb-wet" min="0" max="1" value="0.3" step="0.01"
-                                       class="w-full accent-gray-500">
-                                <span id="reverb-wet-value" class="text-xs text-gray-400">30%</span>
-                            </div>
-                            <div>
-                                <label class="block text-sm text-gray-400 mb-1">Distortion</label>
-                                <input type="range" id="distortion-wet" min="0" max="1" value="0.2" step="0.01"
-                                       class="w-full accent-gray-500">
-                                <span id="distortion-wet-value" class="text-xs text-gray-400">20%</span>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
             <!-- MIDI Connection Panel -->
-            <div class="bg-gray-800 rounded-xl p-6 shadow-2xl">
-                <h2 class="text-2xl font-bold mb-6 text-gray-300 flex items-center">
-                    <i data-feather="music" class="mr-2"></i> MIDI Connection
                 </h2>
-                <div class="mb-6">
-                    <button id="midi-connect-btn" class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
-                        <i data-feather="power" class="mr-2"></i> Connect MIDI Device
                     </button>
                 </div>
-                <div class="bg-gray-700 rounded-lg p-4 mb-6">
-                    <h3 class="font-semibold mb-3 text-gray-300">MIDI Status</h3>
                     <div id="midi-status" class="text-sm text-yellow-400">
-                        Not connected
                     </div>
                 </div>
-                <div class="bg-gray-700 rounded-lg p-4">
-                    <h3 class="font-semibold mb-3 text-gray-300">Active Notes</h3>
-                    <div id="active-notes" class="text-sm text-gray-400 h-32 overflow-y-auto">
-                        No active notes
                     </div>
                 </div>
             </div>
         </div>
-        <!-- Visualizer -->
-        <div class="bg-gray-800 rounded-xl p-6 shadow-2xl mb-12">
-            <h2 class="text-2xl font-bold mb-6 text-gray-300 flex items-center">
-                <i data-feather="activity" class="mr-2"></i> Audio Visualizer
             </h2>
-            <canvas id="visualizer" class="w-full h-48 bg-gray-900 rounded-lg"></canvas>
         </div>
     </div>
-    <custom-footer></custom-footer>
-    <script src="components/navbar.js"></script>
-    <script src="components/footer.js"></script>
     <script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
-<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
+<body class="bg-black text-cyan-400 min-h-screen font-mono">
     <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-8">
+            <h1 class="text-3xl md:text-5xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
+                SYNTHWAVE STUDIO
             </h1>
+            <p class="text-cyan-600 text-sm">POLYPHONIC MIDI SYNTHESIZER</p>
         </header>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+            <!-- Oscilloscope Panel -->
+            <div class="lg:col-span-2 bg-gray-900 border border-cyan-800 rounded-lg p-4 shadow-lg shadow-cyan-900/20">
+                <div class="flex justify-between items-center mb-3">
+                    <h2 class="text-lg font-bold text-cyan-300 flex items-center">
+                        <i data-feather="activity" class="mr-2 text-cyan-500"></i> OSCILLOSCOPE
+                    </h2>
+                    <div class="flex space-x-2">
+                        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
+                        <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
+                        <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                     </div>
+                </div>
+                <canvas id="visualizer" class="w-full h-64 bg-black border border-cyan-900 rounded"></canvas>
+                <!-- ADSR Visualizer -->
+                <div class="mt-6">
+                    <h3 class="text-md font-bold text-cyan-300 mb-3">ADSR ENVELOPE</h3>
+                    <div class="relative h-32 bg-black border border-cyan-900 rounded">
+                        <canvas id="adsr-visualizer" class="w-full h-full"></canvas>
                     </div>
                 </div>
             </div>
             <!-- MIDI Connection Panel -->
+            <div class="bg-gray-900 border border-cyan-800 rounded-lg p-4 shadow-lg shadow-cyan-900/20">
+                <h2 class="text-lg font-bold mb-4 text-cyan-300 flex items-center">
+                    <i data-feather="music" class="mr-2 text-cyan-500"></i> MIDI INTERFACE
                 </h2>
+                <div class="mb-4">
+                    <button id="midi-connect-btn" class="w-full bg-gray-800 hover:bg-gray-700 text-cyan-300 font-bold py-2 px-4 rounded border border-cyan-700 transition duration-200 flex items-center justify-center">
+                        <i data-feather="power" class="mr-2"></i> CONNECT DEVICE
                     </button>
                 </div>
+                <div class="bg-gray-800 rounded p-3 mb-4 border border-cyan-900">
+                    <h3 class="font-semibold mb-2 text-cyan-300">STATUS</h3>
                     <div id="midi-status" class="text-sm text-yellow-400">
+                        NOT CONNECTED
                     </div>
                 </div>
+                <div class="bg-gray-800 rounded p-3 border border-cyan-900">
+                    <h3 class="font-semibold mb-2 text-cyan-300">ACTIVE NOTES</h3>
+                    <div id="active-notes" class="text-sm text-cyan-500 h-32 overflow-y-auto">
+                        NO ACTIVE NOTES
                     </div>
                 </div>
             </div>
         </div>
+        <!-- Control Matrix -->
+        <div class="bg-gray-900 border border-cyan-800 rounded-lg p-4 shadow-lg shadow-cyan-900/20 mb-8">
+            <h2 class="text-lg font-bold mb-4 text-cyan-300 flex items-center">
+                <i data-feather="sliders" class="mr-2 text-cyan-500"></i> CONTROL MATRIX
             </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <!-- Oscillator Section -->
+                <div class="bg-gray-800 rounded p-4 border border-cyan-900">
+                    <h3 class="font-bold mb-3 text-cyan-300 border-b border-cyan-900 pb-2">OSCILLATOR</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">WAVEFORM</label>
+                            <select id="oscillator-type" class="w-full bg-gray-900 text-cyan-300 rounded p-2 border border-cyan-800">
+                                <option value="sawtooth">SAWTOOTH</option>
+                                <option value="sine">SINE</option>
+                                <option value="square">SQUARE</option>
+                                <option value="triangle">TRIANGLE</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">DETUNE</label>
+                            <input type="range" id="oscillator-detune" min="-50" max="50" value="0" step="1"
+                                   class="w-full accent-cyan-500">
+                            <span id="oscillator-detune-value" class="text-xs text-cyan-600">0 CENTS</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Filter Section -->
+                <div class="bg-gray-800 rounded p-4 border border-cyan-900">
+                    <h3 class="font-bold mb-3 text-cyan-300 border-b border-cyan-900 pb-2">FILTER</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">CUTOFF</label>
+                            <input type="range" id="filter-frequency" min="50" max="5000" value="1000" step="1"
+                                   class="w-full accent-cyan-500">
+                            <span id="filter-frequency-value" class="text-xs text-cyan-600">1000 HZ</span>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">RESONANCE</label>
+                            <input type="range" id="filter-q" min="0.1" max="20" value="1" step="0.1"
+                                   class="w-full accent-cyan-500">
+                            <span id="filter-q-value" class="text-xs text-cyan-600">1.0</span>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">TYPE</label>
+                            <select id="filter-type" class="w-full bg-gray-900 text-cyan-300 rounded p-2 border border-cyan-800">
+                                <option value="lowpass">LOWPASS</option>
+                                <option value="highpass">HIGHPASS</option>
+                                <option value="bandpass">BANDPASS</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <!-- Envelope Section -->
+                <div class="bg-gray-800 rounded p-4 border border-cyan-900">
+                    <h3 class="font-bold mb-3 text-cyan-300 border-b border-cyan-900 pb-2">ENVELOPE</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">ATTACK</label>
+                            <input type="range" id="envelope-attack" min="0.01" max="5" value="0.1" step="0.01"
+                                   class="w-full accent-cyan-500">
+                            <span id="envelope-attack-value" class="text-xs text-cyan-600">0.1 S</span>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">DECAY</label>
+                            <input type="range" id="envelope-decay" min="0.01" max="5" value="0.3" step="0.01"
+                                   class="w-full accent-cyan-500">
+                            <span id="envelope-decay-value" class="text-xs text-cyan-600">0.3 S</span>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">SUSTAIN</label>
+                            <input type="range" id="envelope-sustain" min="0" max="1" value="0.5" step="0.01"
+                                   class="w-full accent-cyan-500">
+                            <span id="envelope-sustain-value" class="text-xs text-cyan-600">50%</span>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">RELEASE</label>
+                            <input type="range" id="envelope-release" min="0.1" max="10" value="1.0" step="0.1"
+                                   class="w-full accent-cyan-500">
+                            <span id="envelope-release-value" class="text-xs text-cyan-600">1.0 S</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Effects Section -->
+                <div class="bg-gray-800 rounded p-4 border border-cyan-900">
+                    <h3 class="font-bold mb-3 text-cyan-300 border-b border-cyan-900 pb-2">EFFECTS</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">REVERB</label>
+                            <input type="range" id="reverb-wet" min="0" max="1" value="0.3" step="0.01"
+                                   class="w-full accent-cyan-500">
+                            <span id="reverb-wet-value" class="text-xs text-cyan-600">30%</span>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">DISTORTION</label>
+                            <input type="range" id="distortion-wet" min="0" max="1" value="0.2" step="0.01"
+                                   class="w-full accent-cyan-500">
+                            <span id="distortion-wet-value" class="text-xs text-cyan-600">20%</span>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-cyan-500 mb-1">DELAY</label>
+                            <input type="range" id="delay-wet" min="0" max="1" value="0.25" step="0.01"
+                                   class="w-full accent-cyan-500">
+                            <span id="delay-wet-value" class="text-xs text-cyan-600">25%</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
 </body>
+</html>

script.js CHANGED Viewed

@@ -1,11 +1,10 @@
-// Shared JavaScript across all pages
-console.log('SynthWave Studio loaded');
 // Tone.js setup
 let synth;
 let filter;
 let reverb;
 let distortion;
 let analyser;
 let activeNotes = new Map();
@@ -33,12 +32,18 @@ function setupSynth() {
         wet: 0.2
     }).connect(reverb);
     // Create filter
     filter = new Tone.Filter({
         type: "lowpass",
         frequency: 1000,
         Q: 1
-    }).connect(distortion);
     // Create main synth
     synth = new Tone.PolySynth(Tone.Synth, {
@@ -47,14 +52,14 @@ function setupSynth() {
         },
         envelope: {
             attack: 0.1,
-            decay: 0.2,
-            sustain: 0.3,
-            release: 0.5
         }
     }).connect(filter);
     // Create analyzer for visualizer
-    analyser = new Tone.Analyser("fft", 32);
     synth.connect(analyser);
     console.log('Synth initialized');
@@ -66,8 +71,8 @@ let midiInputs = [];
 function onMIDISuccess(midi) {
     midiAccess = midi;
-    updateMIDIStatus('Connected');
-    document.getElementById('midi-connect-btn').textContent = 'MIDI Connected';
     document.getElementById('midi-connect-btn').disabled = true;
     // Get inputs
@@ -82,7 +87,7 @@ function onMIDISuccess(midi) {
 function onMIDIFailure(msg) {
     console.error('Failed to get MIDI access - ' + msg);
-    updateMIDIStatus('Connection failed: ' + msg, 'error');
 }
 function onMIDIStateChange(event) {
@@ -101,12 +106,12 @@ function onMIDIStateChange(event) {
 function setupMIDIInput(input) {
     midiInputs.push(input);
     input.addEventListener('midimessage', onMIDIMessage);
-    updateMIDIStatus(`Connected to: ${input.name}`, 'success');
 }
 function removeMIDIInput(input) {
     midiInputs = midiInputs.filter(i => i.id !== input.id);
-    updateMIDIStatus(`Disconnected: ${input.name}`, 'warning');
 }
 function onMIDIMessage(message) {
@@ -155,15 +160,15 @@ function noteOff(note) {
 function updateActiveNotesDisplay() {
     const container = document.getElementById('active-notes');
     if (activeNotes.size === 0) {
-        container.innerHTML = '<div class="text-gray-500">No active notes</div>';
         return;
     }
     let html = '';
     activeNotes.forEach((note, key) => {
-        html += `<div class="py-1 px-2 rounded mb-1 bg-gray-600 flex justify-between">
                     <span>${note.name}</span>
-                    <span class="text-gray-400">Velocity: ${note.velocity}</span>
                  </div>`;
     });
     container.innerHTML = html;
@@ -185,7 +190,7 @@ function updateMIDIStatus(message, type = 'info') {
             statusEl.classList.add('text-red-400');
             break;
         default:
-            statusEl.classList.add('text-blue-400');
     }
 }
@@ -198,10 +203,19 @@ function setupUIControls() {
         }
     });
     // Filter Frequency
     document.getElementById('filter-frequency').addEventListener('input', (e) => {
         const value = parseInt(e.target.value);
-        document.getElementById('filter-frequency-value').textContent = `${value} Hz`;
         if (filter) {
             filter.frequency.value = value;
         }
@@ -216,22 +230,51 @@ function setupUIControls() {
         }
     });
     // Envelope Attack
     document.getElementById('envelope-attack').addEventListener('input', (e) => {
         const value = parseFloat(e.target.value);
-        document.getElementById('envelope-attack-value').textContent = `${value.toFixed(2)} s`;
         if (synth) {
             synth.set({ envelope: { attack: value } });
         }
     });
     // Envelope Release
     document.getElementById('envelope-release').addEventListener('input', (e) => {
         const value = parseFloat(e.target.value);
-        document.getElementById('envelope-release-value').textContent = `${value.toFixed(1)} s`;
         if (synth) {
             synth.set({ envelope: { release: value } });
         }
     });
     // Reverb Wet
@@ -251,6 +294,15 @@ function setupUIControls() {
             distortion.wet.value = value;
         }
     });
 }
 // Visualizer
@@ -275,17 +327,30 @@ function setupVisualizer() {
         const values = analyser.getValue();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        // Draw gradient background
-        const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
-        gradient.addColorStop(0, 'rgba(107, 114, 128, 0.2)');
-        gradient.addColorStop(1, 'rgba(107, 114, 128, 0.05)');
-        ctx.fillStyle = gradient;
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
         // Draw waveform
         ctx.beginPath();
         ctx.lineWidth = 2;
-        ctx.strokeStyle = '#6b7280'; // gray-500
         const sliceWidth = canvas.width / values.length;
         let x = 0;
@@ -310,13 +375,103 @@ function setupVisualizer() {
     draw();
 }
 // Initialize everything when page loads
 document.addEventListener('DOMContentLoaded', () => {
     // Setup UI controls
     setupUIControls();
-    // Setup visualizer
     setupVisualizer();
     // Setup synth
     setupSynth();
@@ -328,7 +483,7 @@ document.addEventListener('DOMContentLoaded', () => {
             navigator.requestMIDIAccess()
                 .then(onMIDISuccess, onMIDIFailure);
         } else {
-            updateMIDIStatus('WebMIDI is not supported in this browser', 'error');
         }
     });
-});

 // Tone.js setup
 let synth;
 let filter;
 let reverb;
 let distortion;
+let delay;
 let analyser;
 let activeNotes = new Map();
         wet: 0.2
     }).connect(reverb);
+    delay = new Tone.FeedbackDelay({
+        delayTime: 0.25,
+        feedback: 0.5,
+        wet: 0.25
+    }).connect(distortion);
     // Create filter
     filter = new Tone.Filter({
         type: "lowpass",
         frequency: 1000,
         Q: 1
+    }).connect(delay);
     // Create main synth
     synth = new Tone.PolySynth(Tone.Synth, {
         },
         envelope: {
             attack: 0.1,
+            decay: 0.3,
+            sustain: 0.5,
+            release: 1.0
         }
     }).connect(filter);
     // Create analyzer for visualizer
+    analyser = new Tone.Analyser("fft", 64);
     synth.connect(analyser);
     console.log('Synth initialized');
 function onMIDISuccess(midi) {
     midiAccess = midi;
+    updateMIDIStatus('CONNECTED');
+    document.getElementById('midi-connect-btn').textContent = 'DEVICE CONNECTED';
     document.getElementById('midi-connect-btn').disabled = true;
     // Get inputs
 function onMIDIFailure(msg) {
     console.error('Failed to get MIDI access - ' + msg);
+    updateMIDIStatus('CONNECTION FAILED: ' + msg, 'error');
 }
 function onMIDIStateChange(event) {
 function setupMIDIInput(input) {
     midiInputs.push(input);
     input.addEventListener('midimessage', onMIDIMessage);
+    updateMIDIStatus(`CONNECTED TO: ${input.name}`, 'success');
 }
 function removeMIDIInput(input) {
     midiInputs = midiInputs.filter(i => i.id !== input.id);
+    updateMIDIStatus(`DISCONNECTED: ${input.name}`, 'warning');
 }
 function onMIDIMessage(message) {
 function updateActiveNotesDisplay() {
     const container = document.getElementById('active-notes');
     if (activeNotes.size === 0) {
+        container.innerHTML = '<div class="text-cyan-700">NO ACTIVE NOTES</div>';
         return;
     }
     let html = '';
     activeNotes.forEach((note, key) => {
+        html += `<div class="py-1 px-2 rounded mb-1 bg-gray-900 border border-cyan-900 flex justify-between">
                     <span>${note.name}</span>
+                    <span class="text-cyan-600">VEL: ${note.velocity}</span>
                  </div>`;
     });
     container.innerHTML = html;
             statusEl.classList.add('text-red-400');
             break;
         default:
+            statusEl.classList.add('text-cyan-400');
     }
 }
         }
     });
+    // Oscillator Detune
+    document.getElementById('oscillator-detune').addEventListener('input', (e) => {
+        const value = parseInt(e.target.value);
+        document.getElementById('oscillator-detune-value').textContent = `${value} CENTS`;
+        if (synth) {
+            synth.set({ oscillator: { detune: value } });
+        }
+    });
     // Filter Frequency
     document.getElementById('filter-frequency').addEventListener('input', (e) => {
         const value = parseInt(e.target.value);
+        document.getElementById('filter-frequency-value').textContent = `${value} HZ`;
         if (filter) {
             filter.frequency.value = value;
         }
         }
     });
+    // Filter Type
+    document.getElementById('filter-type').addEventListener('change', (e) => {
+        if (filter) {
+            filter.type = e.target.value;
+        }
+    });
     // Envelope Attack
     document.getElementById('envelope-attack').addEventListener('input', (e) => {
         const value = parseFloat(e.target.value);
+        document.getElementById('envelope-attack-value').textContent = `${value.toFixed(2)} S`;
         if (synth) {
             synth.set({ envelope: { attack: value } });
         }
+        drawADSR(); // Update ADSR visualization
+    });
+    // Envelope Decay
+    document.getElementById('envelope-decay').addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        document.getElementById('envelope-decay-value').textContent = `${value.toFixed(2)} S`;
+        if (synth) {
+            synth.set({ envelope: { decay: value } });
+        }
+        drawADSR(); // Update ADSR visualization
+    });
+    // Envelope Sustain
+    document.getElementById('envelope-sustain').addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        document.getElementById('envelope-sustain-value').textContent = `${Math.round(value * 100)}%`;
+        if (synth) {
+            synth.set({ envelope: { sustain: value } });
+        }
+        drawADSR(); // Update ADSR visualization
     });
     // Envelope Release
     document.getElementById('envelope-release').addEventListener('input', (e) => {
         const value = parseFloat(e.target.value);
+        document.getElementById('envelope-release-value').textContent = `${value.toFixed(1)} S`;
         if (synth) {
             synth.set({ envelope: { release: value } });
         }
+        drawADSR(); // Update ADSR visualization
     });
     // Reverb Wet
             distortion.wet.value = value;
         }
     });
+    // Delay Wet
+    document.getElementById('delay-wet').addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        document.getElementById('delay-wet-value').textContent = `${Math.round(value * 100)}%`;
+        if (delay) {
+            delay.wet.value = value;
+        }
+    });
 }
 // Visualizer
         const values = analyser.getValue();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Draw grid
+        ctx.strokeStyle = 'rgba(6, 182, 212, 0.1)';
+        ctx.lineWidth = 1;
+        // Vertical lines
+        for (let x = 0; x < canvas.width; x += 20) {
+            ctx.beginPath();
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, canvas.height);
+            ctx.stroke();
+        }
+        // Horizontal lines
+        for (let y = 0; y < canvas.height; y += 20) {
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(canvas.width, y);
+            ctx.stroke();
+        }
         // Draw waveform
         ctx.beginPath();
         ctx.lineWidth = 2;
+        ctx.strokeStyle = '#06b6d4'; // cyan-500
         const sliceWidth = canvas.width / values.length;
         let x = 0;
     draw();
 }
+// ADSR Visualizer
+function setupADSRVisualizer() {
+    const canvas = document.getElementById('adsr-visualizer');
+    const ctx = canvas.getContext('2d');
+    function resizeCanvas() {
+        canvas.width = canvas.clientWidth;
+        canvas.height = canvas.clientHeight;
+    }
+    window.addEventListener('resize', resizeCanvas);
+    resizeCanvas();
+    // Initial draw
+    drawADSR();
+    function drawADSR() {
+        if (!canvas.width || !canvas.height) return;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Draw grid
+        ctx.strokeStyle = 'rgba(6, 182, 212, 0.1)';
+        ctx.lineWidth = 1;
+        // Vertical lines
+        for (let x = 0; x < canvas.width; x += 20) {
+            ctx.beginPath();
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, canvas.height);
+            ctx.stroke();
+        }
+        // Horizontal lines
+        for (let y = 0; y < canvas.height; y += 20) {
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(canvas.width, y);
+            ctx.stroke();
+        }
+        // Draw ADSR envelope
+        const attack = parseFloat(document.getElementById('envelope-attack').value);
+        const decay = parseFloat(document.getElementById('envelope-decay').value);
+        const sustain = parseFloat(document.getElementById('envelope-sustain').value);
+        const release = parseFloat(document.getElementById('envelope-release').value);
+        // Normalize values for visualization
+        const totalTime = attack + decay + 2 + release; // Add some time for sustain and release visualization
+        const attackWidth = (attack / totalTime) * canvas.width;
+        const decayWidth = (decay / totalTime) * canvas.width;
+        const sustainWidth = (2 / totalTime) * canvas.width;
+        const releaseWidth = (release / totalTime) * canvas.width;
+        ctx.beginPath();
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = '#06b6d4'; // cyan-500
+        // Start at 0
+        ctx.moveTo(0, canvas.height);
+        // Attack
+        ctx.lineTo(attackWidth, 0);
+        // Decay
+        const sustainHeight = canvas.height - (sustain * canvas.height);
+        ctx.lineTo(attackWidth + decayWidth, sustainHeight);
+        // Sustain
+        ctx.lineTo(attackWidth + decayWidth + sustainWidth, sustainHeight);
+        // Release
+        ctx.lineTo(attackWidth + decayWidth + sustainWidth + releaseWidth, canvas.height);
+        ctx.stroke();
+        // Draw labels
+        ctx.fillStyle = '#06b6d4';
+        ctx.font = '10px monospace';
+        ctx.fillText('A', 5, canvas.height - 5);
+        ctx.fillText('D', attackWidth - 10, canvas.height - 5);
+        ctx.fillText('S', attackWidth + decayWidth - 10, sustainHeight - 5);
+        ctx.fillText('R', attackWidth + decayWidth + sustainWidth + releaseWidth - 15, canvas.height - 5);
+    }
+    // Make drawADSR accessible globally for updates
+    window.drawADSR = drawADSR;
+}
 // Initialize everything when page loads
 document.addEventListener('DOMContentLoaded', () => {
     // Setup UI controls
     setupUIControls();
+    // Setup visualizers
     setupVisualizer();
+    setupADSRVisualizer();
     // Setup synth
     setupSynth();
             navigator.requestMIDIAccess()
                 .then(onMIDISuccess, onMIDIFailure);
         } else {
+            updateMIDIStatus('WEBMIDI NOT SUPPORTED', 'error');
         }
     });
+});

style.css CHANGED Viewed

@@ -1,20 +1,22 @@
-/* Shared styles across all pages */
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');
 :root {
-  --primary-color: #6b7280; /* gray-500 */
-  --secondary-color: #ffffff; /* white */
 }
 body {
-    font-family: 'Roboto', sans-serif;
-    background-color: #111827; /* gray-900 */
-    color: var(--secondary-color);
     margin: 0;
     padding: 0;
     min-height: 100vh;
-    display: flex;
-    flex-direction: column;
 }
 h1, h2, h3, h4, h5, h6 {
@@ -31,7 +33,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 ::-webkit-scrollbar-track {
-    background: #1f2937; /* gray-800 */
 }
 ::-webkit-scrollbar-thumb {
@@ -40,69 +42,97 @@ h1, h2, h3, h4, h5, h6 {
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: #4b5563; /* gray-600 */
 }
 /* Button styles */
 button {
     transition: all 0.2s ease;
 }
 button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 /* Input range styling */
 input[type="range"] {
     -webkit-appearance: none;
-    height: 8px;
-    border-radius: 4px;
-    background: #374151; /* gray-700 */
     outline: none;
 }
 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
-    width: 20px;
-    height: 20px;
     border-radius: 50%;
     background: var(--primary-color);
     cursor: pointer;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
 }
 input[type="range"]::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
     border-radius: 50%;
     background: var(--primary-color);
     cursor: pointer;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
     border: none;
 }
 /* Select styling */
 select {
     appearance: none;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 0.5rem center;
     background-size: 1em;
 }
 /* Canvas styling */
-#visualizer {
     width: 100%;
-    height: 192px;
-    background: #111827; /* gray-900 */
-    border-radius: 0.5rem;
 }
-/* Active note styling */
-.note-active {
-    background-color: #374151 !important; /* gray-700 */
-    border-left: 3px solid var(--primary-color);
 }
 /* Responsive adjustments */
@@ -118,4 +148,20 @@ select {
     .grid {
         gap: 1rem;
     }
-}

+/* SynthWave Studio Styles */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');
 :root {
+  --primary-color: #06b6d4; /* cyan-500 */
+  --secondary-color: #ffffff;
+  --background-color: #000000;
+  --panel-color: #111827; /* gray-900 */
+  --border-color: #0891b2; /* cyan-700 */
 }
 body {
+    font-family: 'Roboto Mono', monospace;
+    background-color: var(--background-color);
+    color: var(--primary-color);
     margin: 0;
     padding: 0;
     min-height: 100vh;
 }
 h1, h2, h3, h4, h5, h6 {
 }
 ::-webkit-scrollbar-track {
+    background: #0f172a; /* gray-900 */
 }
 ::-webkit-scrollbar-thumb {
 }
 ::-webkit-scrollbar-thumb:hover {
+    background: #0891b2; /* cyan-600 */
 }
 /* Button styles */
 button {
     transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.75rem;
 }
 button:hover {
+    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
 }
 /* Input range styling */
 input[type="range"] {
     -webkit-appearance: none;
+    height: 6px;
+    border-radius: 3px;
+    background: #0f172a; /* gray-900 */
     outline: none;
 }
 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     background: var(--primary-color);
     cursor: pointer;
+    box-shadow: 0 0 5px rgba(6, 182, 212, 0.8);
 }
 input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     background: var(--primary-color);
     cursor: pointer;
+    box-shadow: 0 0 5px rgba(6, 182, 212, 0.8);
     border: none;
 }
 /* Select styling */
 select {
     appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 0.5rem center;
     background-size: 1em;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.75rem;
 }
 /* Canvas styling */
+#visualizer, #adsr-visualizer {
     width: 100%;
+    background: #000000;
+    border-radius: 0.25rem;
+}
+/* Panel styling */
+.bg-gray-900 {
+    background-color: #0f172a; /* darker gray */
+}
+.border-cyan-800 {
+    border-color: #164e63; /* darker cyan */
+}
+.border-cyan-900 {
+    border-color: #083344; /* darkest cyan */
+}
+/* Text colors */
+.text-cyan-300 {
+    color: #67e8f9;
+}
+.text-cyan-500 {
+    color: #06b6d4;
 }
+.text-cyan-600 {
+    color: #0891b2;
+}
+.text-cyan-700 {
+    color: #0e7490;
 }
 /* Responsive adjustments */
     .grid {
         gap: 1rem;
     }
+    .text-lg {
+        font-size: 1rem;
+    }
+    .text-md {
+        font-size: 0.875rem;
+    }
+    .text-sm {
+        font-size: 0.75rem;
+    }
+    .text-xs {
+        font-size: 0.625rem;
+    }
+}