Skip to main content
Public

Share visualization

Send this visualization to others.

Algorithmic Sequence Piano with Sonic Controls

Public visualization

By curran on VizHub

Choose how to deliver this visualization

Each option retains the visualization's existing access rules. Check the client's permissions and data license before handing it off.

LinkedIn caption

LinkedIn cannot prefill the post text. Copy the caption, then paste it in LinkedIn. You can tag the VizHub company page when posting.

More options

Embed on a websiteCopy iframe embed code

The embed preserves the visualization's visibility and project dataset permissions.

Download & exportHTML, source ZIP and authorized project data

Source ZIP contains editable visualization files; it does not include project datasets. Standalone HTML is available where authorized and packages readable referenced data for offline use. Dataset ZIP requires project read permission.

Standalone HTMLSource ZIP
Publishing & handoffCopy a client maintenance summary

Includes the canonical link, visibility, and available export formats. Confirm dataset attribution, licensing and maintenance responsibilities with the publisher.

Viewing a saved revision (read-only)

kYMgJoGw7tJzRBKvKGe3e

Algorithmic Sequence Piano with Sonic Controls

0 stars0Public
CCurran Kelleher
Last edited Nov 10, 2026
Created on Nov 10, 2026
Forked from 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.

Sonic Aura Sequencer

An algorithmic step sequencer that generates evolving musical patterns and lets you sculpt the overall "sonic aura" with a live control panel.

How to Use

  1. Press Play — the sequencer runs a 16-step loop.
  2. Click cells in the grid to toggle notes by hand, or press Generate to re-roll an algorithmic pattern based on the current density.
  3. Use the Aura Controls sliders to shape the sound in real time:
    • Tempo — playback speed (also retunes the delay time)
    • Density — probability weighting used by the generator
    • Filter Cutoff — low-pass filter brightness
    • Attack / Release — envelope shape of each note
    • Delay Mix / Feedback — echo "aura" depth
    • Detune Spread — oscillator detune for width/warmth
  4. Checkboxes change the character:
    • Sine / Triangle / Saw — oscillator waveforms (multi-selectable)
    • Drone Pedal — a low root note every two bars
    • Arpeggio — staggers simultaneous notes into a rippling arpeggio
    • Minor / Major scale — tonal mood
    • Aura Glow — pulsing visual bloom synced to playback
    • Swirl FX — the aura ring orbits with the playhead
    • Chords — adds soft thirds and fifths under low notes

References

MIT Licensed