Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SynthWave Studio</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <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="bg-gray-900 border-2 border-cyan-700 rounded-xl p-6 shadow-2xl shadow-cyan-900/30"> | |
| <!-- Main Synth Interface --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Oscilloscope Section --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-gray-800 border border-cyan-800 rounded-lg p-4 mb-6 relative synth-display"> | |
| <div class="absolute top-2 left-2 w-3 h-3 bg-green-500 rounded-full"></div> | |
| <div class="absolute top-2 left-8 w-3 h-3 bg-yellow-500 rounded-full"></div> | |
| <div class="absolute top-2 left-14 w-3 h-3 bg-red-500 rounded-full"></div> | |
| <h2 class="text-lg font-bold text-cyan-300 mb-4 text-center">OSCILLOSCOPE</h2> | |
| <div class="relative h-64 bg-black rounded-lg border-4 border-gray-900 shadow-inner"> | |
| <canvas id="visualizer" class="absolute inset-0 w-full h-full"></canvas> | |
| <div class="absolute inset-0 border-2 border-cyan-700 rounded pointer-events-none"></div> | |
| <div class="absolute top-2 left-2 text-cyan-600 text-xs">VOLTAGE: <span id="voltage-display">0.00V</span></div> | |
| <div class="absolute top-2 right-2 text-cyan-600 text-xs">TIME: <span id="time-display">0.00ms</span></div> | |
| </div> | |
| </div> | |
| <!-- ADSR Envelope Editors --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Amplitude ADSR --> | |
| <div class="bg-gray-800 border border-cyan-800 rounded-lg p-4"> | |
| <h3 class="text-md font-bold text-cyan-300 mb-3 flex items-center"> | |
| <i data-feather="bar-chart-2" class="mr-2 text-cyan-500"></i> AMP ENVELOPE | |
| </h3> | |
| <div class="relative h-40 bg-black border border-cyan-900 rounded mb-3"> | |
| <canvas id="amp-envelope-editor" class="w-full h-full"></canvas> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <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> | |
| <!-- Filter ADSR --> | |
| <div class="bg-gray-800 border border-cyan-800 rounded-lg p-4"> | |
| <h3 class="text-md font-bold text-cyan-300 mb-3 flex items-center"> | |
| <i data-feather="bar-chart" class="mr-2 text-cyan-500"></i> FILTER ENVELOPE | |
| </h3> | |
| <div class="relative h-40 bg-black border border-cyan-900 rounded mb-3"> | |
| <canvas id="filter-envelope-editor" class="w-full h-full"></canvas> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <div> | |
| <label class="block text-xs text-cyan-500 mb-1">ATTACK</label> | |
| <input type="range" id="filter-attack" min="0.01" max="5" value="0.1" step="0.01" | |
| class="w-full accent-cyan-500"> | |
| <span id="filter-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="filter-decay" min="0.01" max="5" value="0.3" step="0.01" | |
| class="w-full accent-cyan-500"> | |
| <span id="filter-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="filter-sustain" min="0" max="1" value="0.5" step="0.01" | |
| class="w-full accent-cyan-500"> | |
| <span id="filter-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="filter-release" min="0.1" max="10" value="1.0" step="0.1" | |
| class="w-full accent-cyan-500"> | |
| <span id="filter-release-value" class="text-xs text-cyan-600">1.0 S</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls Panel --> | |
| <div class="space-y-6"> | |
| <!-- MIDI Section --> | |
| <div class="bg-gray-800 border border-cyan-800 rounded-lg p-4"> | |
| <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-700 hover:bg-gray-600 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-900 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-900 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-24 overflow-y-auto"> | |
| NO ACTIVE NOTES | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Oscillator Controls --> | |
| <div class="bg-gray-800 border border-cyan-800 rounded-lg p-4"> | |
| <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 Controls --> | |
| <div class="bg-gray-800 border border-cyan-800 rounded-lg p-4"> | |
| <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> | |
| <!-- Effects Section --> | |
| <div class="bg-gray-800 border border-cyan-800 rounded-lg p-4"> | |
| <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> | |
| </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> | |