shadcn.io is not affiliated with official shadcn/ui
Beat Maker Music Block for Vue
A drum grid of four voices and sixteen steps with three patterns, tempo and swing sliders, a playhead that runs for four bars, Step, Clear and Copy, and no audio.
Installation
Overview
Sketch a rhythm with this beat maker for Vue with Ark UI. It holds Gridbeat's drum grid in a hairline frame with a plus mark on each corner, in three bands. The first has a Segment Group for the patterns A, B and C, and a Tempo and a Swing Slider with their values in words. The second is the grid: four rows, Kick, Snare, Hat and Clap, of sixteen step buttons under a ruler whose every second tick shifts by the swing ("Swing 30%: every second step lands 30% late"). The arrow keys move between steps and Space or Enter turns one on or off. The third is the foot: the derived "One bar: 2.0 s at 120 BPM", Play (the one Shine Button), Step, Clear and Copy to the next pattern. Play runs the playhead along the sixteen steps at the tempo, with the swing in the timing of every second step, for four bars, then stops itself. Nothing sounds. It's built from Segment Group, Slider, Shine Button, Button and Guides, with a CSS entrance only. For drum machines, sequencers and any grid of steps.
FAQ
How do I load my own patterns?
Edit START_LINES: each pattern is four lines of sixteen characters, one per voice, where x is a hit and . is a rest. The voices are VOICES and the pattern names BANKS. The hit count and the bar length are worked out from the current pattern and tempo, so nothing is typed twice. In your app replace the local state with your project's patterns and send them to your audio engine from flip.
What does Play do, and what stops it?
It moves a playhead ring along the steps with one timeout per step, as long as a sixteenth note at the current tempo, and every second step is longer or shorter by the swing. It stops after four bars (64 steps) and says so, or when you press Stop. Changing the tempo or the swing while it runs takes effect on the next step. There is no sound: connect play to your audio engine's clock instead of this timer.
What happens with reduced motion?
Play is refused with a message and the playhead does not run. Step moves it one step at a time instead, and the status line says which step it is on, so the whole block stays usable without any motion.
How do I use the grid from the keyboard?
The grid is one tab stop. Tab into it, move with the arrow keys (Home and End run to the ends of a row), and press Space or Enter to turn a step on or off. Each step is a button named for its voice and number, such as "Hat, step 5", and it is pressed or not. The status line says what changed and how many hits the pattern has.
What stays local, and how do I wire it for real?
Everything: the patterns, tempo and swing live in the page and reset on a reload, and no audio plays in this demo. To make it real, keep the patterns in your project state, schedule notes from the same sixteenth-note clock in your audio engine, and feed the swing into the time of every second step as the block already does for the playhead.