🎹 Synth Universe

\n \n \n \n\n",[],[90,139],"77db300e-5517-11f1-b5c7-ee650bb23af1","favicon.svg","019e4aae-b356-73f8-880d-b185c53e237c",5,["D",1779369470803],"\n\n",[],[90,148],"5bc134ea-5517-11f1-ab88-ee650bb23af1","components","019e4aae-b356-73f8-880d-aca478e9634a",["D",1779369423632],[161],[90,156],{"_35":162,"_13":163,"_64":164,"_66":157,"_67":68,"_69":31,"_71":72,"_37":165,"_17":143,"_75":119,"_77":166,"_79":50,"_80":-5,"_99":167,"_18":168},"ef3c0b14-5517-11f1-a028-ee650bb23af1","App.tsx","019e4aae-b355-7240-ab73-c6aa8f28b61a",["D",1779369671129],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n initAudio, noteOn, noteOff, getNoteFreqs,\n setWaveShape, getWaveShape,\n type WaveShape,\n} from \"../synth.ts\";\nimport { render } from \"../visualizer.ts\";\n\nconst KEY_LABELS: Record = {\n a: { note: \"C\" }, w: { note: \"C#\", black: true },\n s: { note: \"D\" }, e: { note: \"D#\", black: true },\n d: { note: \"E\" },\n f: { note: \"F\" }, t: { note: \"F#\", black: true },\n g: { note: \"G\" }, y: { note: \"G#\", black: true },\n h: { note: \"A\" }, u: { note: \"A#\", black: true },\n j: { note: \"B\" },\n k: { note: \"C\" }, o: { note: \"C#\", black: true },\n l: { note: \"D\" }, p: { note: \"D#\", black: true },\n};\n\nconst WHITE_KEYS = [\"a\",\"s\",\"d\",\"f\",\"g\",\"h\",\"j\",\"k\",\"l\"];\nconst BLACK_KEYS_MAP: Record = {\n w: { key: \"w\", offset: 0 },\n e: { key: \"e\", offset: 1 },\n t: { key: \"t\", offset: 3 },\n y: { key: \"y\", offset: 4 },\n u: { key: \"u\", offset: 5 },\n o: { key: \"o\", offset: 7 },\n p: { key: \"p\", offset: 8 },\n};\n\nconst WAVES: WaveShape[] = [\"sine\", \"triangle\", \"sawtooth\", \"square\"];\nconst WAVE_ICONS: Record = {\n sine: \"∿\",\n triangle: \"△\",\n sawtooth: \"⩘\",\n square: \"⊓\",\n};\n\nexport function App() {\n const canvasRef = useRef(null);\n const [started, setStarted] = useState(false);\n const [wave, setWave] = useState(\"sawtooth\");\n const [activeKeys, setActiveKeys] = useState>(new Set());\n const [showHelp, setShowHelp] = useState(true);\n\n const start = useCallback(() => {\n initAudio();\n setStarted(true);\n setTimeout(() => setShowHelp(false), 4000);\n }, []);\n\n // Keyboard handler\n useEffect(() => {\n if (!started) return;\n const freqs = getNoteFreqs();\n const down = (e: KeyboardEvent) => {\n if (e.repeat) return;\n const k = e.key.toLowerCase();\n if (freqs[k]) {\n noteOn(k);\n setActiveKeys(prev => new Set(prev).add(k));\n }\n };\n const up = (e: KeyboardEvent) => {\n const k = e.key.toLowerCase();\n if (freqs[k]) {\n noteOff(k);\n setActiveKeys(prev => { const s = new Set(prev); s.delete(k); return s; });\n }\n };\n window.addEventListener(\"keydown\", down);\n window.addEventListener(\"keyup\", up);\n return () => { window.removeEventListener(\"keydown\", down); window.removeEventListener(\"keyup\", up); };\n }, [started]);\n\n // Canvas animation\n useEffect(() => {\n if (!started) return;\n const canvas = canvasRef.current!;\n const ctx = canvas.getContext(\"2d\")!;\n let animId: number;\n\n const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };\n resize();\n window.addEventListener(\"resize\", resize);\n\n const loop = () => {\n render(ctx, canvas.width, canvas.height);\n animId = requestAnimationFrame(loop);\n };\n loop();\n return () => { cancelAnimationFrame(animId); window.removeEventListener(\"resize\", resize); };\n }, [started]);\n\n if (!started) {\n return (\n

🎹

\n SYNTH UNIVERSE\n

\n Audio-reactive visualizer & keyboard synthesizer\n

\n ▶ CLICK TO START\n

\n \n

\n Use keyboard keys A–L to play • Works best on desktop\n

\n );\n }\n\n const keyWidth = 52;\n const pianoWidth = WHITE_KEYS.length * keyWidth;\n\n return (\n <>\n

Code