Skip to main content
SimilarExport ZIP
100%

Sequencer

✓ Published0🌍 Public
CCurran Kelleher
Last edited Apr 28, 2025
Created on Feb 25, 2025
Forked from Piano App

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 description

This fully working music sequencer took about 5 minutes to create using VizHub's "Edit with Code" feature. It even wrote the README content below!

Piano 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

  1. Click on the sequencer grid cells to activate/deactivate notes
  2. Adjust the tempo using the slider
  3. Press Play to start the sequence
  4. You can also click on piano keys to play them directly
MIT Licensed

Similar vizzes

Loading thumbnail…

Piano App

This interactive piano app renders a two-octave keyboard as an SVG, where clicking a key triggers a sine-wave tone. The React component manages a set of pressed keys, updating their visual state, while the Web Audio API's `createOscillator`, `createGain`, and `exponentialRampToValueAtTime` methods synthesize a short, fading note. The white and black keys are drawn as SVG rectangles with note labels, and the app uses CSS transitions to show a subtle press effect.

CCurran Kelleher
78% match
Loading thumbnail…

Rainbow Piano

This interactive piano visualization uses React to render a two-octave keyboard with SVG, where each key is colored in a distinct pastel rainbow hue based on its note name. Clicking a key triggers a short synthesized sine wave tone via the Web Audio API, creating aural feedback as the key visually brightens for 300 milliseconds. The interface combines playful color coding with functional sound generation, demonstrating a simple musical instrument built entirely with standard web technologies.

CCurran Kelleher
73% match
Loading thumbnail…

Fork of Rainbow Piano

This interactive visualization presents a two-octave piano keyboard rendered in SVG, with each white key colored in a distinct pastel rainbow hue. Users click individual keys to trigger a short synthesized sine wave tone, created through the Web Audio API's `createOscillator` and `createGain` nodes. Pressed keys temporarily darken via CSS transitions and React's `useState`, visually confirming the note selection. The layout maps 24 notes (C1 through B2) to specific frequencies, displaying numeric solfège labels on each key.

NNita
73% match
Loading thumbnail…

Fork of Fork of Rainbow Piano

A piano keyboard rendered as a colorful SVG interface lets users play notes by clicking keys, with each key displaying its corresponding solfège number. The React app maps 24 notes to specific frequencies and uses the Web Audio API’s `OscillatorNode` and `GainNode` to generate short sine-wave tones. Each white key is filled with a pastel rainbow color based on its note letter, while pressed keys temporarily brighten or darken. The layout includes both white and black keys, with black keys positioned between the white ones at higher vertical offsets.

KKareena
72% match
Loading thumbnail…

Fork of Piano App

This interactive piano visualization renders a stylized keyboard with white and black keys, complete with gradient styling, hover effects, and a decorative cat figure seated in front. The piano generates sound through the Web Audio API, with each key press triggering synthesized tones via JavaScript event handling. The layout uses CSS flexbox, transitions, transforms, and clip-path shapes to create realistic proportions and depth, while dynamic key generation builds the interface programmatically.

NNita
68% match
Loading thumbnail…

Sunset App

This visualization shows an interactive piano with colorful gradient keys and a decorative gray cat. The code uses the Web Audio API to synthesize sounds and JavaScript for dynamic key generation. CSS flexbox arranges the keys, while transitions and transforms create hover and press effects. CSS gradients, box-shadows, and clip-path define the piano’s styling and the cat’s ears, with event handlers triggering audio feedback on key interactions.

NNita
68% match
Loading thumbnail…

Piano App

An interactive virtual piano with white and black keys generates musical tones through the Web Audio API, allowing play via mouse, touch, or keyboard. The instrument displays a realistic 3D design using CSS gradients and shadows, with visual feedback through CSS transitions on key presses. A built-in demo melody button triggers a pre-programmed scale. The implementation dynamically creates piano keys through DOM manipulation and uses Web Audio API for audio synthesis with gain control, demonstrating front-end techniques for responsive instrument interfaces.

NNita
67% match
Loading thumbnail…

Percussion

A beat machine lets users compose a rhythmic loop by toggling 16-step patterns across eight percussion instruments. A live playback cursor highlights the current tick, triggering synthesized sounds via the Howler.js audio library while the grid visually pulses with the beat. The interface supports mouse clicks and keyboard shortcuts (A through semicolon) for real-time pattern editing, and a metronome track is pre-enabled. The animation shows a glowing column sweeping across the grid, with active notes highlighted in purple, built with jQuery, FastClick, and CoffeeScript.

MMAKIO135
67% match