Examples
See it in every mode.
A live gallery of the visual styles, the headline features and a wall of brand themes. Every player below is real — and every one is just a <div>.
Visual styles
All six, one attribute apart.
bars · mirror · line · blocks · dots · seekbar — every card below reads the same kind
of peak data and only changes data-waveform-style.
data-waveform-style="bars" data-waveform-style="mirror" data-waveform-style="line" data-waveform-style="blocks" data-waveform-style="dots" data-waveform-style="seekbar" Cover art on the button
The artwork is the play button.
One attribute — data-artwork-position="button" —
turns the cover into the transport. It brings its own cover-sized defaults (no ring, square-ish tile),
and a scrim keeps the glyph legible over any artwork.
New in 1.22.
Sound library
A whole library, one list.
The right tool for a catalogue is WaveformSounds, not a stack of players. Every row draws a mini waveform from 64 bars of peaks and one shared player plays whichever you pick, so a pack of hundreds costs the same as one. Search it, filter by type, key or tempo, then run down it with ↓. Each preview here has a download button.
- Paris Bass Loop 01LoopBass0:06
- Paris Bass Loop 02LoopBass0:06
- Paris Bass Note A1Bass0.4s
- Paris Bass Note A2Bass0:02
- Drum LoopLoopDrum loops1280:03
- Paris Drums 01LoopDrum loops0:06
- Paris Drums 02LoopDrum loops0:06
- Electric PianoKeys1260:07
- House PianoKeys126C#m0:07
- Red WoodsLeadsG#m0:13
- Surprise KissLeads0:07
- Too YoungLeads1210:07
- Paris Loop 01LoopMelodic loopsAm0:06
- Paris Loop 02LoopMelodic loopsAm0:03
- Paris Loop 03LoopMelodic loopsAm0:03
- ColorizePads0:13
- ReachPads0:07
- SeacrestPads0:07
- Too YoungPads0:07
- Bus 605Plucks0:07
- DesirePlucks0:11
- Got Me ThinkingPlucksG#m0:11
- IcarusPlucks0:12
- LovelyPlucks0:11
- LuminousPlucksDm0:12
- NocturnePlucksF#0:12
- Pieces Of YouPlucks0:12
- PlankPlucks121Eb0:07
- SinePlucksCm0:11
- Small MomentsPlucks0:11
- Spaces In BetweenPlucks121Bb0:07
- Too YoungPlucks121Gm0:07
- WingsPlucksG0:11
No sounds match.
Features
The good stuff, switched on.
Chapters, BPM, speed control, artwork, compact layouts — each is one or two attributes. Here they are, running live.
Gradient themes
Pour in a gradient.
The whole page is monochrome — except here. Each player passes an array of stops to
data-waveform-color
and a direction via
data-waveform-gradient
— a real canvas gradient, no images.
horizontal horizontal horizontal diagonal horizontal vertical It's just a div
No build step, no init call.
Every example on this page — styles, features, brand themes — is plain markup the runtime picks up on load. Here's the chapter-markers demo, verbatim.
<div data-waveform-player
data-url="/audio/little-paris.mp3"
data-waveform="/waveforms/little-paris.json"
data-title="Little Paris"
data-waveform-style="mirror"
data-markers='[{"time":0,"label":"Intro"},
{"time":3,"label":"Build"},
{"time":7,"label":"Drop"}]'></div>