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" Inline catalog
A whole library, every row a waveform.
The stock-music layout — no bottom bar, everything inline. Each row is a headless WaveformPlayer
(show-controls +
show-info off) with the play
control on the artwork. Click a row's waveform to seek; one track plays at a time.
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>