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