Skip to content

Latest commit

 

History

History
47 lines (32 loc) · 1.05 KB

File metadata and controls

47 lines (32 loc) · 1.05 KB

React Synthesizer

A modern web-based synthesizer built with React, Web Audio API, and Tailwind CSS.

Features

  • Sawtooth wave oscillator
  • Computer keyboard control for playing notes
  • Lowpass filter with adjustable frequency and resonance
  • Modern, responsive UI built with Tailwind CSS

Keyboard Layout

The synthesizer can be played using your computer keyboard:

  • White keys: A, S, D, F, G, H, J, K (C3 to C4)
  • Black keys: W, E, T, Y, U (C#3 to A#3)

Getting Started

Prerequisites

  • Node.js and npm installed

Installation

  1. Clone the repository
  2. Install dependencies:
    npm install
    
  3. Start the development server:
    npm start
    
  4. Open your browser at http://localhost:3000

How it Works

This project uses the Web Audio API to generate sound. The main components are:

  • useSynthesizer hook: Manages audio context, oscillators, and filter
  • Keyboard component: Handles keyboard input and displays the visual keyboard
  • FilterControls component: Provides UI for adjusting filter settings

License

MIT