Percussion

100%

✓ Published0🌍 Public

Last edited Apr 12, 2017

Created on Apr 12, 2017

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Sonic Pi Drum Machine

This example turns a Sonic Pi drum machine script into a visual instrument panel. It shows a sequencer grid for three drum tracks—hi-hat, kick, and snare—with per-step amplitude values (0–9) mapped from the embedded pattern data. The Ruby code defines a `live_loop` and `run_pattern` API to schedule samples, using Sonic Pi’s `sample` and `sleep` functions with a `:pulse` synchronization loop. A selectable `use_kit` command switches between acoustic, electro, and toy sound kits via a `drum_kits` hash. The visualization highlights the code’s structure, not the audio output.

MMAKIO135

69% match

Loading thumbnail…

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.

CCurran Kelleher

67% match

Loading thumbnail…

circular-synth

This interactive visualization builds a circular synthesizer where each of the 16 beats is a rotating segment containing concentric pitch arcs. Users click or hover over arcs to toggle notes on and off, with four states cycling through white, blue, red, and green. The visualization uses D3’s `d3.svg.arc` and linear scales to map pitch frequencies to radii, while an audio context schedules oscillators for each active note. A `setInterval` loop advances the beat, highlighting the current segment in purple and triggering sounds through the Web Audio API’s `createOscillator` and `createGainNode`.

11wheel

64% match

Loading thumbnail…

JS Bin

This example presents an interactive musical keyboard built with the Web Audio API, where each piano-style button corresponds to a specific note (C through B). The page shows how a single oscillator can generate tones by connecting and disconnecting it from the audio destination on button press and release. The code uses `AudioContext`, `createOscillator`, and `createGain` from the Web Audio API, with square-wave synthesis producing the sound. The interface relies on HTML button elements with `onmousedown` and `onmouseup` handlers to trigger the `noise()` and `silence()` functions, which set the oscillator frequency and toggle its connection. The source is a standalone HTML file with embedded JavaScript, rendering no visual data but demonstrating audio-frequency control.

FFrankieFabuloso

61% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated visualization displays a grid of 30 by 30 circles that orbit and pulse in a rhythmic, colorful pattern, creating a hypnotic screensaver effect. Circles move along circular paths with varying radii and speeds, while their size and color shift over time based on sine functions tied to the animation clock. The canvas API handles all rendering, with requestAnimationFrame driving the continuous loop and a semi-transparent fillRect creating motion trails. The code uses no external libraries, drawing directly as a fork of the original mathematical patterns tutorial.

Ggrateful4music@hotmail.com

61% match

Loading thumbnail…

Fork of Rainbow Piano App

A playful piano visualization combines realistic instrument styling with sound synthesis. The interface shows a rainbow-colored keyboard with white and black keys, featuring gradient, hover, and press effects alongside a decorative cat figure. Built with HTML, CSS, and the Web Audio API, it dynamically generates keys via JavaScript and triggers tones on click. CSS flexbox, transitions, transforms, box-shadows, and clip-path create the visual depth, while the audio context handles note synthesis.

NNita

61% 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

61% match

Loading thumbnail…

Gist 7942740a263d3aa26e8c77adad206372

This visualization is an interactive canvas-based musical instrument that maps a two-dimensional grid of colored, circular nodes to specific musical notes. It shows how different spatial regions correspond to different tones, with the size and color of each node likely encoding additional sonic parameters such as pitch or octave. The application uses a custom `PitchDetector` algorithm and a `Player` class to translate node interactions into audio output, while the rendering relies on Canvas drawing operations. The code references the `notes_midi_freq.csv` dataset to map note names and MIDI numbers to their corresponding frequencies, enabling the generation of accurate musical tones.

MMAKIO135

61% match