Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SynthX - XBOX Edition</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen font-sans"> | |
| <!-- Header --> | |
| <header class="p-4 border-b-2 border-green-500 flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold text-green-400 flex items-center"> | |
| <i data-feather="music" class="mr-2"></i> SynthX - XBOX Edition | |
| </h1> | |
| <div class="flex space-x-4"> | |
| <button id="save-preset" class="px-4 py-2 bg-green-600 rounded hover:bg-green-700 transition">Save Preset</button> | |
| <button id="load-preset" class="px-4 py-2 bg-blue-600 rounded hover:bg-blue-700 transition">Load Preset</button> | |
| </div> | |
| </header> | |
| <main class="container mx-auto p-4"> | |
| <!-- Oscillators Section --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4 text-green-400 border-b border-green-500 pb-2">Oscillators</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Oscillator 1 --> | |
| <div class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <h3 class="font-bold mb-2 text-green-300">OSC 1</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm mb-1">Waveform</label> | |
| <select id="osc1-waveform" class="w-full bg-gray-700 rounded p-2"> | |
| <option value="sine">Sine</option> | |
| <option value="square">Square</option> | |
| <option value="sawtooth">Sawtooth</option> | |
| <option value="triangle">Triangle</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Frequency</label> | |
| <input type="range" id="osc1-frequency" min="20" max="2000" value="440" class="w-full"> | |
| <span id="osc1-freq-value" class="text-xs">440 Hz</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Detune</label> | |
| <input type="range" id="osc1-detune" min="-50" max="50" value="0" class="w-full"> | |
| <span id="osc1-detune-value" class="text-xs">0 cents</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Volume</label> | |
| <input type="range" id="osc1-volume" min="-60" max="0" value="0" class="w-full"> | |
| <span id="osc1-vol-value" class="text-xs">0 dB</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Oscillator 2 --> | |
| <div class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <h3 class="font-bold mb-2 text-green-300">OSC 2</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm mb-1">Waveform</label> | |
| <select id="osc2-waveform" class="w-full bg-gray-700 rounded p-2"> | |
| <option value="sine">Sine</option> | |
| <option value="square">Square</option> | |
| <option value="sawtooth">Sawtooth</option> | |
| <option value="triangle">Triangle</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Frequency</label> | |
| <input type="range" id="osc2-frequency" min="20" max="2000" value="440" class="w-full"> | |
| <span id="osc2-freq-value" class="text-xs">440 Hz</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Detune</label> | |
| <input type="range" id="osc2-detune" min="-50" max="50" value="0" class="w-full"> | |
| <span id="osc2-detune-value" class="text-xs">0 cents</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Volume</label> | |
| <input type="range" id="osc2-volume" min="-60" max="0" value="0" class="w-full"> | |
| <span id="osc2-vol-value" class="text-xs">0 dB</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Oscillator 3 --> | |
| <div class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <h3 class="font-bold mb-2 text-green-300">OSC 3</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm mb-1">Waveform</label> | |
| <select id="osc3-waveform" class="w-full bg-gray-700 rounded p-2"> | |
| <option value="sine">Sine</option> | |
| <option value="square">Square</option> | |
| <option value="sawtooth">Sawtooth</option> | |
| <option value="triangle">Triangle</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Frequency</label> | |
| <input type="range" id="osc3-frequency" min="20" max="2000" value="440" class="w-full"> | |
| <span id="osc3-freq-value" class="text-xs">440 Hz</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Detune</label> | |
| <input type="range" id="osc3-detune" min="-50" max="50" value="0" class="w-full"> | |
| <span id="osc3-detune-value" class="text-xs">0 cents</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Volume</label> | |
| <input type="range" id="osc3-volume" min="-60" max="0" value="0" class="w-full"> | |
| <span id="osc3-vol-value" class="text-xs">0 dB</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ADSR Envelope --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4 text-green-400 border-b border-green-500 pb-2">ADSR Envelope</h2> | |
| <div class="bg-gray-800 p-6 rounded-lg border-2 border-green-700"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> | |
| <div> | |
| <label class="block text-sm mb-1">Attack</label> | |
| <input type="range" id="attack" min="0.01" max="5" step="0.01" value="0.1" class="w-full"> | |
| <span id="attack-value" class="text-xs">0.1 s</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Decay</label> | |
| <input type="range" id="decay" min="0.01" max="5" step="0.01" value="0.3" class="w-full"> | |
| <span id="decay-value" class="text-xs">0.3 s</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Sustain</label> | |
| <input type="range" id="sustain" min="0" max="1" step="0.01" value="0.7" class="w-full"> | |
| <span id="sustain-value" class="text-xs">70%</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Release</label> | |
| <input type="range" id="release" min="0.01" max="10" step="0.01" value="0.5" class="w-full"> | |
| <span id="release-value" class="text-xs">0.5 s</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <canvas id="adsr-canvas" width="800" height="200" class="w-full bg-gray-900 rounded"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- X/Y Modulation Matrix --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4 text-green-400 border-b border-green-500 pb-2">Modulation Matrix</h2> | |
| <div class="bg-gray-800 p-6 rounded-lg border-2 border-green-700"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="flex-1"> | |
| <h3 class="font-bold mb-2 text-green-300">X/Y Pad</h3> | |
| <div id="xy-pad" class="relative w-full h-64 bg-gray-900 border-2 border-green-600 rounded cursor-pointer"> | |
| <div id="xy-handle" class="absolute w-6 h-6 bg-green-500 rounded-full -ml-3 -mt-3 transform -translate-x-1/2 -translate-y-1/2"></div> | |
| </div> | |
| <div class="flex justify-between mt-2 text-xs"> | |
| <span>X: <span id="x-value">0.5</span></span> | |
| <span>Y: <span id="y-value">0.5</span></span> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-bold mb-2 text-green-300">Modulation Sources</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm mb-1">Source X</label> | |
| <select class="w-full bg-gray-700 rounded p-2"> | |
| <option>LFO 1</option> | |
| <option>LFO 2</option> | |
| <option>Envelope</option> | |
| <option>Velocity</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Destination X</label> | |
| <select class="w-full bg-gray-700 rounded p-2"> | |
| <option>Osc 1 Frequency</option> | |
| <option>Osc 2 Frequency</option> | |
| <option>Filter Cutoff</option> | |
| <option>Amp Volume</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Source Y</label> | |
| <select class="w-full bg-gray-700 rounded p-2"> | |
| <option>LFO 1</option> | |
| <option>LFO 2</option> | |
| <option>Envelope</option> | |
| <option>Velocity</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Destination Y</label> | |
| <select class="w-full bg-gray-700 rounded p-2"> | |
| <option>Osc 1 Frequency</option> | |
| <option>Osc 2 Frequency</option> | |
| <option>Filter Cutoff</option> | |
| <option>Amp Volume</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Effects Section --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4 text-green-400 border-b border-green-500 pb-2">Effects</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Reverb --> | |
| <div class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-bold text-green-300">Reverb</h3> | |
| <label class="switch"> | |
| <input type="checkbox" id="reverb-toggle"> | |
| <span class="slider round"></span> | |
| </label> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm mb-1">Decay</label> | |
| <input type="range" id="reverb-decay" min="0.1" max="10" step="0.1" value="2" class="w-full"> | |
| <span class="text-xs">2 s</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Wet</label> | |
| <input type="range" id="reverb-wet" min="0" max="1" step="0.01" value="0.3" class="w-full"> | |
| <span class="text-xs">30%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Delay --> | |
| <div class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-bold text-green-300">Delay</h3> | |
| <label class="switch"> | |
| <input type="checkbox" id="delay-toggle"> | |
| <span class="slider round"></span> | |
| </label> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm mb-1">Time</label> | |
| <input type="range" id="delay-time" min="0.01" max="2" step="0.01" value="0.5" class="w-full"> | |
| <span class="text-xs">0.5 s</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Feedback</label> | |
| <input type="range" id="delay-feedback" min="0" max="1" step="0.01" value="0.3" class="w-full"> | |
| <span class="text-xs">30%</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Wet</label> | |
| <input type="range" id="delay-wet" min="0" max="1" step="0.01" value="0.2" class="w-full"> | |
| <span class="text-xs">20%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Filter --> | |
| <div class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-bold text-green-300">Filter</h3> | |
| <label class="switch"> | |
| <input type="checkbox" id="filter-toggle"> | |
| <span class="slider round"></span> | |
| </label> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm mb-1">Type</label> | |
| <select id="filter-type" class="w-full bg-gray-700 rounded p-2"> | |
| <option value="lowpass">Lowpass</option> | |
| <option value="highpass">Highpass</option> | |
| <option value="bandpass">Bandpass</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Frequency</label> | |
| <input type="range" id="filter-frequency" min="20" max="20000" value="1000" class="w-full"> | |
| <span class="text-xs">1000 Hz</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Q</label> | |
| <input type="range" id="filter-q" min="0.1" max="20" step="0.1" value="1" class="w-full"> | |
| <span class="text-xs">1.0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Distortion --> | |
| <div class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-bold text-green-300">Distortion</h3> | |
| <label class="switch"> | |
| <input type="checkbox" id="distortion-toggle"> | |
| <span class="slider round"></span> | |
| </label> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm mb-1">Drive</label> | |
| <input type="range" id="distortion-drive" min="0" max="1" step="0.01" value="0.5" class="w-full"> | |
| <span class="text-xs">50%</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Wet</label> | |
| <input type="range" id="distortion-wet" min="0" max="1" step="0.01" value="0.3" class="w-full"> | |
| <span class="text-xs">30%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chorus --> | |
| <div class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-bold text-green-300">Chorus</h3> | |
| <label class="switch"> | |
| <input type="checkbox" id="chorus-toggle"> | |
| <span class="slider round"></span> | |
| </label> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm mb-1">Rate</label> | |
| <input type="range" id="chorus-rate" min="0.1" max="10" step="0.1" value="2" class="w-full"> | |
| <span class="text-xs">2 Hz</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Depth</label> | |
| <input type="range" id="chorus-depth" min="0" max="1" step="0.01" value="0.5" class="w-full"> | |
| <span class="text-xs">50%</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Wet</label> | |
| <input type="range" id="chorus-wet" min="0" max="1" step="0.01" value="0.3" class="w-full"> | |
| <span class="text-xs">30%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phaser --> | |
| <div class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-bold text-green-300">Phaser</h3> | |
| <label class="switch"> | |
| <input type="checkbox" id="phaser-toggle"> | |
| <span class="slider round"></span> | |
| </label> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm mb-1">Rate</label> | |
| <input type="range" id="phaser-rate" min="0.1" max="10" step="0.1" value="2" class="w-full"> | |
| <span class="text-xs">2 Hz</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Depth</label> | |
| <input type="range" id="phaser-depth" min="0" max="1" step="0.01" value="0.5" class="w-full"> | |
| <span class="text-xs">50%</span> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Wet</label> | |
| <input type="range" id="phaser-wet" min="0" max="1" step="0.01" value="0.3" class="w-full"> | |
| <span class="text-xs">30%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Keyboard --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4 text-green-400 border-b border-green-500 pb-2">Keyboard</h2> | |
| <div id="keyboard" class="bg-gray-800 p-4 rounded-lg border-2 border-green-700"> | |
| <div class="flex justify-center"> | |
| <div class="keyboard-container relative"> | |
| <!-- White keys --> | |
| <div class="flex"> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| <div class="key white-key w-12 h-40 bg-white border border-gray-300 rounded-b-md mr-px relative z-10"></div> | |
| </div> | |
| <!-- Black keys --> | |
| <div class="absolute top-0 left-0 flex"> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-8 relative z-20"></div> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-16 relative z-20"></div> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-24 relative z-20"></div> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-32 relative z-20"></div> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-40 relative z-20"></div> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-64 relative z-20"></div> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-72 relative z-20"></div> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-80 relative z-20"></div> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-88 relative z-20"></div> | |
| <div class="key black-key w-8 h-24 bg-black rounded-b-md ml-112 relative z-20"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="p-4 border-t-2 border-green-500 text-center text-gray-400"> | |
| <p>SynthX - XBOX Edition | Made with Tone.js</p> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |