tej chhabra

A web-based musical instrument that brings sound synthesis to the browser. Built with React and the Web Audio API, 7eSynth transforms your keyboard into an interactive synthesizer for testing musical ideas and exploring sound design.

View Live Site, or View on GitHub

Technical Implementation

Core Technologies:

React with TypeScript (90%+ type coverage)
Web Audio API for real-time sound synthesis
Tailwind CSS for responsive UI design
Netlify for optimized deployment

Key Technical Achievement:

Implemented a real-time audio synthesis engine using the Web Audio API, handling keyboard event capture, note mapping, and audio context management to create a responsive musical instrument with minimal latency. The system processes keyboard inputs and translates them into synthesizer controls with performance optimized for live playability.

Engineering Highlights:

Dual input modes: keyboard event handling and click-based interaction
Real-time audio synthesis with Web Audio API oscillators and envelope control
Type-safe React components with comprehensive TypeScript coverage
Optimized production build with code splitting and caching strategies
Responsive design for various screen sizes and input methods

Skills

Audio Programming: Web Audio API, sound synthesis, real-time audio processing
Event Handling: Complex keyboard input mapping, event debouncing
React Development: Component architecture, state management, effects
TypeScript: Strong typing, type safety across audio contexts
UI/UX Design: Interactive musical interface, visual feedback systems
Performance Optimization: Audio latency minimization, efficient rendering