Viewing a saved revision (read-only)
kYMgJoGw7tJzRBKvKGe3e
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
- Press Play — the sequencer runs a 16-step loop.
- Click cells in the grid to toggle notes by hand, or press Generate to re-roll an algorithmic pattern based on the current density.
- 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
- 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
- Visualization 0225364e26bc461f840733a4cd0a7742 — dual-range slider styling inspiration
- Visualization bd953ba3146b4de0a74bfb044db0412b — step-sequencer grid & tempo control inspiration