Spaces:

SREAL
/

synthx-xbox-edition

Running

App Files Files Community

SREAL commited on Jan 18

Commit

d4e9dbb

verified ·

1 Parent(s): a3230d6

I want you to make a tone.JS based synthesizer with 3 oscillators, ADSR, an X/Y modulation matrix and a large variety of effects with all relevant parameters. give it a graphic interface that is reminiscent of the original XBOX GUI.

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +433 -19
script.js +406 -0
style.css +163 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Synthx Xbox Edition
-emoji: 🐠
-colorFrom: blue
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: SynthX - XBOX Edition 🎮
+colorFrom: purple
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,433 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>

script.js ADDED Viewed

	@@ -0,0 +1,406 @@

+// Initialize Tone.js synth
+const synth = new Tone.PolySynth(Tone.Synth).toDestination();
+// Initialize effects
+const reverb = new Tone.Reverb({
+  decay: 2,
+  wet: 0.3
+}).toDestination();
+const delay = new Tone.FeedbackDelay({
+  delayTime: 0.5,
+  feedback: 0.3,
+  wet: 0.2
+}).toDestination();
+const filter = new Tone.Filter({
+  type: "lowpass",
+  frequency: 1000,
+  Q: 1
+}).toDestination();
+const distortion = new Tone.Distortion({
+  distortion: 0.5,
+  wet: 0.3
+}).toDestination();
+const chorus = new Tone.Chorus({
+  frequency: 2,
+  depth: 0.5,
+  wet: 0.3
+}).toDestination();
+const phaser = new Tone.Phaser({
+  frequency: 2,
+  depth: 0.5,
+  wet: 0.3
+}).toDestination();
+// Connect synth to effects chain
+synth.chain(filter, distortion, chorus, phaser, delay, reverb, Tone.Destination);
+// Oscillator controls
+document.getElementById('osc1-waveform').addEventListener('change', (e) => {
+  synth.set({ oscillator: { type: e.target.value } });
+});
+document.getElementById('osc1-frequency').addEventListener('input', (e) => {
+  const freq = parseFloat(e.target.value);
+  document.getElementById('osc1-freq-value').textContent = `${freq} Hz`;
+  // In a real implementation, this would update oscillator frequency
+});
+document.getElementById('osc1-detune').addEventListener('input', (e) => {
+  const detune = parseFloat(e.target.value);
+  document.getElementById('osc1-detune-value').textContent = `${detune} cents`;
+  // In a real implementation, this would update oscillator detune
+});
+document.getElementById('osc1-volume').addEventListener('input', (e) => {
+  const vol = parseFloat(e.target.value);
+  document.getElementById('osc1-vol-value').textContent = `${vol} dB`;
+  // In a real implementation, this would update oscillator volume
+});
+// Similar event listeners for osc2 and osc3 would go here
+// ADSR Controls
+document.getElementById('attack').addEventListener('input', (e) => {
+  const attack = parseFloat(e.target.value);
+  document.getElementById('attack-value').textContent = `${attack.toFixed(2)} s`;
+  synth.set({ envelope: { attack } });
+});
+document.getElementById('decay').addEventListener('input', (e) => {
+  const decay = parseFloat(e.target.value);
+  document.getElementById('decay-value').textContent = `${decay.toFixed(2)} s`;
+  synth.set({ envelope: { decay } });
+});
+document.getElementById('sustain').addEventListener('input', (e) => {
+  const sustain = parseFloat(e.target.value);
+  document.getElementById('sustain-value').textContent = `${Math.round(sustain * 100)}%`;
+  synth.set({ envelope: { sustain } });
+});
+document.getElementById('release').addEventListener('input', (e) => {
+  const release = parseFloat(e.target.value);
+  document.getElementById('release-value').textContent = `${release.toFixed(2)} s`;
+  synth.set({ envelope: { release } });
+});
+// Draw ADSR visualization
+function drawADSR() {
+  const canvas = document.getElementById('adsr-canvas');
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width;
+  const height = canvas.height;
+  // Clear canvas
+  ctx.clearRect(0, 0, width, height);
+  // Get current values
+  const attack = parseFloat(document.getElementById('attack').value);
+  const decay = parseFloat(document.getElementById('decay').value);
+  const sustain = parseFloat(document.getElementById('sustain').value);
+  const release = parseFloat(document.getElementById('release').value);
+  // Normalize times for visualization
+  const totalTime = attack + decay + release + 1; // Add 1 second for sustain
+  // Draw envelope
+  ctx.beginPath();
+  ctx.moveTo(0, height); // Start at bottom left
+  // Attack
+  const attackWidth = (attack / totalTime) * width;
+  ctx.lineTo(attackWidth, 0);
+  // Decay
+  const decayWidth = (decay / totalTime) * width;
+  ctx.lineTo(attackWidth + decayWidth, height * (1 - sustain));
+  // Sustain
+  const sustainWidth = (1 / totalTime) * width;
+  ctx.lineTo(attackWidth + decayWidth + sustainWidth, height * (1 - sustain));
+  // Release
+  const releaseWidth = (release / totalTime) * width;
+  ctx.lineTo(attackWidth + decayWidth + sustainWidth + releaseWidth, height);
+  ctx.strokeStyle = '#107c10';
+  ctx.lineWidth = 3;
+  ctx.stroke();
+}
+// Update ADSR visualization when values change
+['attack', 'decay', 'sustain', 'release'].forEach(id => {
+  document.getElementById(id).addEventListener('input', drawADSR);
+});
+// Initial draw
+drawADSR();
+// X/Y Pad functionality
+const xyPad = document.getElementById('xy-pad');
+const xyHandle = document.getElementById('xy-handle');
+let isDragging = false;
+function updateXYPosition(x, y) {
+  const rect = xyPad.getBoundingClientRect();
+  let posX = x - rect.left;
+  let posY = y - rect.top;
+  // Constrain to pad boundaries
+  posX = Math.max(0, Math.min(posX, rect.width));
+  posY = Math.max(0, Math.min(posY, rect.height));
+  // Update handle position
+  xyHandle.style.left = `${posX}px`;
+  xyHandle.style.top = `${posY}px`;
+  // Update values (0-1 range)
+  const xValue = posX / rect.width;
+  const yValue = posY / rect.height;
+  document.getElementById('x-value').textContent = xValue.toFixed(2);
+  document.getElementById('y-value').textContent = yValue.toFixed(2);
+  // In a real implementation, these values would control modulation destinations
+}
+xyPad.addEventListener('mousedown', (e) => {
+  isDragging = true;
+  updateXYPosition(e.clientX, e.clientY);
+});
+document.addEventListener('mousemove', (e) => {
+  if (isDragging) {
+    updateXYPosition(e.clientX, e.clientY);
+  }
+});
+document.addEventListener('mouseup', () => {
+  isDragging = false;
+});
+// Touch support for mobile
+xyPad.addEventListener('touchstart', (e) => {
+  isDragging = true;
+  const touch = e.touches[0];
+  updateXYPosition(touch.clientX, touch.clientY);
+  e.preventDefault();
+});
+document.addEventListener('touchmove', (e) => {
+  if (isDragging) {
+    const touch = e.touches[0];
+    updateXYPosition(touch.clientX, touch.clientY);
+    e.preventDefault();
+  }
+});
+document.addEventListener('touchend', () => {
+  isDragging = false;
+});
+// Initialize XY pad handle position
+xyHandle.style.left = '50%';
+xyHandle.style.top = '50%';
+// Effect toggles
+document.getElementById('reverb-toggle').addEventListener('change', (e) => {
+  reverb.wet.value = e.target.checked ? parseFloat(document.getElementById('reverb-wet').value) : 0;
+});
+document.getElementById('delay-toggle').addEventListener('change', (e) => {
+  delay.wet.value = e.target.checked ? parseFloat(document.getElementById('delay-wet').value) : 0;
+});
+document.getElementById('filter-toggle').addEventListener('change', (e) => {
+  filter.frequency.value = e.target.checked ? parseFloat(document.getElementById('filter-frequency').value) : 20000;
+});
+document.getElementById('distortion-toggle').addEventListener('change', (e) => {
+  distortion.wet.value = e.target.checked ? parseFloat(document.getElementById('distortion-wet').value) : 0;
+});
+document.getElementById('chorus-toggle').addEventListener('change', (e) => {
+  chorus.wet.value = e.target.checked ? parseFloat(document.getElementById('chorus-wet').value) : 0;
+});
+document.getElementById('phaser-toggle').addEventListener('change', (e) => {
+  phaser.wet.value = e.target.checked ? parseFloat(document.getElementById('phaser-wet').value) : 0;
+});
+// Effect parameter updates
+document.getElementById('reverb-decay').addEventListener('input', (e) => {
+  reverb.decay = parseFloat(e.target.value);
+});
+document.getElementById('reverb-wet').addEventListener('input', (e) => {
+  const wet = parseFloat(e.target.value);
+  document.getElementById('reverb-wet').nextElementSibling.textContent = `${Math.round(wet * 100)}%`;
+  if (document.getElementById('reverb-toggle').checked) {
+    reverb.wet.value = wet;
+  }
+});
+document.getElementById('delay-time').addEventListener('input', (e) => {
+  delay.delayTime.value = parseFloat(e.target.value);
+  document.getElementById('delay-time').nextElementSibling.textContent = `${parseFloat(e.target.value).toFixed(2)} s`;
+});
+document.getElementById('delay-feedback').addEventListener('input', (e) => {
+  delay.feedback.value = parseFloat(e.target.value);
+  document.getElementById('delay-feedback').nextElementSibling.textContent = `${Math.round(parseFloat(e.target.value) * 100)}%`;
+});
+document.getElementById('delay-wet').addEventListener('input', (e) => {
+  const wet = parseFloat(e.target.value);
+  document.getElementById('delay-wet').nextElementSibling.textContent = `${Math.round(wet * 100)}%`;
+  if (document.getElementById('delay-toggle').checked) {
+    delay.wet.value = wet;
+  }
+});
+document.getElementById('filter-type').addEventListener('change', (e) => {
+  filter.type = e.target.value;
+});
+document.getElementById('filter-frequency').addEventListener('input', (e) => {
+  const freq = parseFloat(e.target.value);
+  document.getElementById('filter-frequency').nextElementSibling.textContent = `${freq} Hz`;
+  if (document.getElementById('filter-toggle').checked) {
+    filter.frequency.value = freq;
+  }
+});
+document.getElementById('filter-q').addEventListener('input', (e) => {
+  filter.Q.value = parseFloat(e.target.value);
+  document.getElementById('filter-q').nextElementSibling.textContent = parseFloat(e.target.value).toFixed(1);
+});
+document.getElementById('distortion-drive').addEventListener('input', (e) => {
+  distortion.distortion = parseFloat(e.target.value);
+  document.getElementById('distortion-drive').nextElementSibling.textContent = `${Math.round(parseFloat(e.target.value) * 100)}%`;
+});
+document.getElementById('distortion-wet').addEventListener('input', (e) => {
+  const wet = parseFloat(e.target.value);
+  document.getElementById('distortion-wet').nextElementSibling.textContent = `${Math.round(wet * 100)}%`;
+  if (document.getElementById('distortion-toggle').checked) {
+    distortion.wet.value = wet;
+  }
+});
+document.getElementById('chorus-rate').addEventListener('input', (e) => {
+  chorus.frequency.value = parseFloat(e.target.value);
+  document.getElementById('chorus-rate').nextElementSibling.textContent = `${parseFloat(e.target.value).toFixed(1)} Hz`;
+});
+document.getElementById('chorus-depth').addEventListener('input', (e) => {
+  chorus.depth = parseFloat(e.target.value);
+  document.getElementById('chorus-depth').nextElementSibling.textContent = `${Math.round(parseFloat(e.target.value) * 100)}%`;
+});
+document.getElementById('chorus-wet').addEventListener('input', (e) => {
+  const wet = parseFloat(e.target.value);
+  document.getElementById('chorus-wet').nextElementSibling.textContent = `${Math.round(wet * 100)}%`;
+  if (document.getElementById('chorus-toggle').checked) {
+    chorus.wet.value = wet;
+  }
+});
+document.getElementById('phaser-rate').addEventListener('input', (e) => {
+  phaser.frequency.value = parseFloat(e.target.value);
+  document.getElementById('phaser-rate').nextElementSibling.textContent = `${parseFloat(e.target.value).toFixed(1)} Hz`;
+});
+document.getElementById('phaser-depth').addEventListener('input', (e) => {
+  phaser.depth = parseFloat(e.target.value);
+  document.getElementById('phaser-depth').nextElementSibling.textContent = `${Math.round(parseFloat(e.target.value) * 100)}%`;
+});
+document.getElementById('phaser-wet').addEventListener('input', (e) => {
+  const wet = parseFloat(e.target.value);
+  document.getElementById('phaser-wet').nextElementSibling.textContent = `${Math.round(wet * 100)}%`;
+  if (document.getElementById('phaser-toggle').checked) {
+    phaser.wet.value = wet;
+  }
+});
+// Keyboard interaction
+const keys = document.querySelectorAll('.key');
+const notes = ['C4', 'D4', 'E4', 'F4', 'G4', 'A4', 'B4', 'C5', 'D5', 'E5', 'F5', 'G5', 'A5'];
+keys.forEach((key, index) => {
+  key.addEventListener('mousedown', () => {
+    synth.triggerAttack(notes[index]);
+    key.classList.add('active');
+  });
+  key.addEventListener('mouseup', () => {
+    synth.triggerRelease(notes[index]);
+    key.classList.remove('active');
+  });
+  key.addEventListener('mouseleave', () => {
+    if (key.classList.contains('active')) {
+      synth.triggerRelease(notes[index]);
+      key.classList.remove('active');
+    }
+  });
+});
+// Touch support for keyboard
+keys.forEach((key, index) => {
+  key.addEventListener('touchstart', (e) => {
+    synth.triggerAttack(notes[index]);
+    key.classList.add('active');
+    e.preventDefault();
+  });
+  key.addEventListener('touchend', (e) => {
+    synth.triggerRelease(notes[index]);
+    key.classList.remove('active');
+    e.preventDefault();
+  });
+});
+// Preset functionality
+document.getElementById('save-preset').addEventListener('click', () => {
+  alert('Preset saved! (In a full implementation, this would save to localStorage or a database)');
+});
+document.getElementById('load-preset').addEventListener('click', () => {
+  alert('Preset loaded! (In a full implementation, this would load from localStorage or a database)');
+});
+// Initialize all sliders with their value displays
+document.querySelectorAll('input[type="range"]').forEach(input => {
+  const valueSpan = input.nextElementSibling;
+  if (valueSpan && valueSpan.tagName === 'SPAN') {
+    const updateValue = () => {
+      const val = parseFloat(input.value);
+      if (input.id.includes('freq')) {
+        valueSpan.textContent = `${val} Hz`;
+      } else if (input.id.includes('detune')) {
+        valueSpan.textContent = `${val} cents`;
+      } else if (input.id.includes('volume')) {
+        valueSpan.textContent = `${val} dB`;
+      } else if (input.id.includes('time') || input.id.includes('attack') || input.id.includes('decay') || input.id.includes('release')) {
+        valueSpan.textContent = `${val.toFixed(2)} s`;
+      } else if (input.id.includes('q')) {
+        valueSpan.textContent = val.toFixed(1);
+      } else if (input.id.includes('rate')) {
+        valueSpan.textContent = `${val.toFixed(1)} Hz`;
+      } else {
+        valueSpan.textContent = `${Math.round(val * 100)}%`;
+      }
+    };
+    input.addEventListener('input', updateValue);
+    updateValue(); // Initial update
+  }
+});

style.css CHANGED Viewed

@@ -1,28 +1,173 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
+:root {
+  --xbox-green: #107c10;
+  --xbox-dark: #1d232b;
+  --xbox-light: #5dc21e;
+}
 body {
+  font-family: 'Roboto', sans-serif;
+  background-color: #0a0a0a;
+  background-image:
+    radial-gradient(circle at 10% 20%, rgba(16, 124, 16, 0.1) 0%, transparent 20%),
+    radial-gradient(circle at 90% 80%, rgba(16, 124, 16, 0.1) 0%, transparent 20%);
+  background-attachment: fixed;
+}
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Orbitron', sans-serif;
+  letter-spacing: 1px;
+}
+/* XBOX-style switch */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+  border-radius: 24px;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+input:checked + .slider {
+  background-color: var(--xbox-green);
+}
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
+/* Keyboard styling */
+.keyboard-container {
+  position: relative;
+  height: 160px;
+  margin: 20px auto;
+  padding: 0 10px;
 }
+.key {
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.1s ease;
 }
+.white-key {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
+.white-key:active,
+.white-key.active {
+  background-color: #e0e0e0;
+  transform: translateY(2px);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
 }
+.black-key {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
+.black-key:active,
+.black-key.active {
+  background-color: #333;
+  transform: translateY(2px);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
+}
+/* XY Pad styling */
+#xy-pad {
+  background:
+    linear-gradient(to bottom, rgba(16, 124, 16, 0.1) 0%, transparent 100%),
+    linear-gradient(to right, rgba(16, 124, 16, 0.1) 0%, transparent 100%);
+  position: relative;
+  overflow: hidden;
+}
+#xy-pad::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: rgba(16, 124, 16, 0.3);
+}
+#xy-pad::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: rgba(16, 124, 16, 0.3);
+}
+#xy-handle {
+  box-shadow: 0 0 10px rgba(16, 124, 16, 0.7);
+  border: 2px solid white;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #1a202c;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--xbox-green);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #5dc21e;
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .keyboard-container {
+    transform: scale(0.8);
+  }
+  #xy-pad {
+    height: 200px;
+  }
+  .grid-cols-1.md\:grid-cols-3,
+  .grid-cols-1.md\:grid-cols-4,
+  .grid-cols-1.md\:grid-cols-2 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}