Viewing a saved revision (read-only)
24148967b2f64a359d0719912a448f97
Sequencer
This interactive music sequencer combines a piano keyboard with an 8-step programming grid for composing rhythmic patterns. The interface displays a grid where users toggle cells to activate notes and adjust playback tempo, while playback animates a highlight moving across the steps. React manages the application state and handles user interactions, while SVG renders the grid and keyboard with dynamic colors indicating programmed notes versus currently playing ones. The audio component generates sine wave sounds in real-time through the Web Audio API, creating immediate auditory feedback for each programmed step.
AI-generated descriptionPiano Sequencer
An interactive piano sequencer you can play and program!
Features:
- Interactive piano keyboard
- 8-step sequencer grid
- Adjustable tempo
- Play/stop controls
Based on the original piano app: https://github.com/curran/piano-app
How to Use
- Click on the sequencer grid cells to activate/deactivate notes
- Adjust the tempo using the slider
- Press Play to start the sequence
- You can also click on piano keys to play them directly