synthesizer-ui

Stars
5
Language
JavaScript
Updated
View on GitHub

subtract.one

Web-based subtractive synthesizer UI and audio engine.

Author: Manavarya09

Short description

  • subtract.one is a small React app that exposes a compact subtractive synthesizer interface in the browser. It includes an AudioEngine, knob and fader controls, waveform selection, preset management, and a realtime oscilloscope.

Features

  • Real-time audio generation via the AudioEngine component
  • Interactive controls: knobs, faders, waveform selector
  • Preset management and sharing
  • Onboarding & small UI for quick experimentation

Getting started

Prerequisites

  • Node.js (v14+ recommended) and npm installed on your machine.

Install


npm install

Run locally

npm start
# then open http://localhost:3000 in your browser

Build for production

npm run build

Tests

npm test

Project structure (important files)

  • src/: React source files
    • App.js: Main app entry and layout
    • components/AudioEngine.js: Audio engine and synthesis logic
    • components/KnobControl.js, FaderControl.js: UI controls
    • components/PresetManager.js: Save/load presets
    • components/Oscilloscope.js: Visual waveform display
  • public/: static assets

Development notes

  • The UI is built with React (Create React App structure). Controls are connected to the audio engine via component props and a central store.
  • If you change audio code, test in Chrome or Firefox (they have best WebAudio support).
  • Use the presets.js and localStorage.js to inspect how presets persist between sessions.

Author

  • Created and maintained by Manavarya09.

Contributing

  • If you'd like changes to the README (for example a different display name), tell me the preferred name and I'll update it.