WaveformBar
A persistent player for your whole site.
A Spotify-style bottom bar that follows the listener across pages — queue, volume, repeat, favorites, cart, DJ markers and cross-page session persistence. All from markup, around 6KB.
$ npm i @arraypress/waveform-bar Pick a track below to launch it.
Live demo
Tap a track. Watch the bar dock.
Each card below is a real data-wb-play trigger. Click one and the live bar appears at the bottom — then favorite it or add it to the cart from the bar (this demo mocks the store; wire the real actions to your own endpoints).
Feature tour
A full transport, not just a play button.
Everything a store or release needs, baked into one persistent bar — and every control stays monochrome by default.
Play queue
Every trigger appends to a queue. Skip forward and back, reorder on the fly, or play straight through.
Volume & mute
An inline slider plus a one-tap mute toggle — your level is remembered across pages and sessions.
Repeat modes
Cycle between off, repeat-one and repeat-all. The control reflects the current mode at a glance.
Two layouts
Waveform mode for a full-width scrubber, or classic mode — a Spotify-style centre layout with track info left, transport centred and a compact seek bar.
Shuffle
An optional shuffle toggle for random queue advance, sitting alongside the repeat modes in the transport.
Favorites & cart
Built-in favorite and add-to-cart actions emit events you can wire to any storefront or wishlist.
DJ markers
Pass timestamped markers per track to flag drops, cues and chapters right on the waveform.
Session persistence
The queue, current track and playback position survive navigation — the bar follows the listener.
Accessible by default
Every control is a labeled button, the waveform is an ARIA slider with keyboard seeking, and the queue announces its open state and closes on Escape.
JavaScript API
Drive the bar from your own UI.
The singleton exposes simple imperative methods. Try them live — these buttons call straight into the docked bar (launch a track above first).
import { WaveformBar } from '@arraypress/waveform-bar';
// One singleton for the whole site — call once.
WaveformBar.init({
continuous: true, // auto-advance through the queue
persist: true, // restore queue + position across pages
});
// Drive it from anywhere:
WaveformBar.togglePlay();
WaveformBar.next();
WaveformBar.cycleRepeat();
WaveformBar.clearQueue();Getting started
Two scripts and a button.
Include the runtime, mark any element as a trigger, and initialize the singleton once. No bundler, no framework, no per-element wiring.
<!-- 1. Load the bar runtime (core player is a dependency) -->
<script src="https://unpkg.com/@arraypress/waveform-player"></script>
<script src="https://unpkg.com/@arraypress/waveform-bar"></script>
<!-- 2. Any element with data-wb-play becomes a trigger -->
<button data-wb-play
data-url="/audio/track.mp3"
data-wb-waveform="/waveforms/track.json"
data-title="Midnight Dreams"
data-artist="The Wavelength"
data-artwork="/covers/midnight.webp">
Play
</button>
<!-- 3. Initialize the singleton once -->
<script>WaveformBar.init({ continuous: true });</script>