LIVE INTERACTIVE / SIX-PAD WEB AUDIO
Play the interface.
Tap KICK, HAT, SNARE, CLAP, VOCAL and FX. Headphones recommended.The brief was to make the artist website playable.
JDMEET is a hard-techno, hardcore and hardstyle producer built for an international audience. A conventional artist homepage could present releases, biography and booking links, but it would not communicate the physical, immediate character of the music. The stronger idea was to let a visitor perform a tiny fragment of that identity before opening Spotify.
We designed a browser-based rhythm unit inspired by the directness of classic pad samplers without copying a branded hardware faceplate. The result is the JM-04: a dedicated interaction section with six large pads, a compact status display and sound-reactive motion. It sits inside the live artist site rather than opening as a separate demo or novelty page.
Six sounds create a useful miniature instrument.
The samples come from the producer's own working library and are delivered as compressed web audio rather than synthesized approximations. That keeps the interaction connected to the real production environment while reducing the transfer size of each one-shot.
The six-pad set is deliberately compact. It gives visitors enough contrast to build a recognizable pattern without turning the homepage into a complicated DAW interface that requires instructions.
| Pad | Role | Interaction goal |
|---|---|---|
| KICK | Hard-rave low-end anchor | Immediate full-body impact |
| HAT | Short high-frequency pulse | Fast repeated rhythm |
| SNARE | Hard-techno backbeat | Clear contrast with the kick |
| CLAP | Wider transient layer | Alternative backbeat colour |
| VOCAL | Short vocal phrase | Human hook and interruption |
| FX | Turntable-style scratch | Texture, punctuation and play |
Rapid retriggering required a small polyphonic audio engine.
A single HTML audio element is not enough for finger drumming. Restarting the same element on every tap cuts off the sound that is already playing, so quick patterns feel broken. The sampler prepares a small pool of audio voices for each pad and rotates through them as new pointer events arrive. Earlier hits can decay while the next hit begins immediately.
The kick has a larger voice pool because it is the sound most likely to be tapped repeatedly. Every other one-shot also has multiple available voices. Samples preload on first use, pointer input keeps latency low on touch screens, and keyboard activation remains available for visitors who do not use a pointer.
- Pointer-down triggering responds at the start of a tap rather than waiting for a full click cycle.
- Per-pad volume balances keep contrasting source files inside one playable unit.
- Independent voice indexes support overlapping hits without maintaining a heavy audio framework.
- Native controls are avoided, but the pads remain semantic buttons with descriptive accessible labels.
The display makes sound visible without pretending to be an analyser.
Each trigger updates the name of the active pad and restarts a thirty-two-bar waveform animation inside the display. The bars expand from the centre, then decay through a short sequence of opacity and scale changes. The motion is an expressive response to the event—not a claim that the browser is plotting a scientific frequency analysis of the sample.
That distinction matters. A convincing interface does not need false precision. It needs a clear relationship between action and response: tap a pad, hear the sound, see the display react, then combine the next hit.
Mobile changed the composition, not just the dimensions.
The sampler becomes most interesting on a phone because thumbs turn the page into a pocket instrument. On smaller screens the six pads switch from three columns to a symmetrical two-by-three grid. The machine, screen, labels and pads are sized as one focused section using the dynamic viewport height, so a visitor encounters a coherent play surface while scrolling.
We tested the layout across several narrow viewport sizes, checked for horizontal overflow and verified that every audio asset returns successfully. The visual hierarchy keeps the live display above the pads and gives every trigger a large, stable touch target.
Interactive brand work should earn its place.
The JM-04 is not a generic animation added to make the page feel expensive. It expresses the artist's medium, gives the visitor a memorable action and demonstrates the aggressive rhythmic palette before the streaming call to action. The rest of the site still handles the practical jobs: music discovery, release promotion, production writing, mixing and mastering enquiries, and international booking.
The useful pattern is transferable. A strong website interaction connects what a business does with something a visitor can understand through action. For a producer that can be playable sound. For another product it might be a diagnostic, calculator, configurator or visual comparison. The technology is secondary to choosing the right interaction for the story.