WaveformBar — Sample Store Demo

Sample Store Favorites + Cart

Click artwork to play. Use the and buttons. State syncs via .wb-favorited and .wb-in-cart classes. First two are server-side pre-favorited. Click a title to visit the product page — playback continues.

Sample Library Table Layout

Click any row to play. Equalizer bars animate on the active track. Hearts show favorite state.

		Name	Artist	BPM	Key

Track Sections Markers + Navigation

A track with section markers. The bar updates the displayed info at each marker boundary. Click any section below or any marker on the waveform to jump.

Little Paris — 6 Sections

Acoustic session with section markers. Click to play, watch the bar update at each transition.

Sections Click to jump

JavaScript API

Control everything programmatically.

WaveformBar.play({ url: 'song.mp3', title: 'Track', artist: 'Artist' });
WaveformBar.addToQueue({ url: 'next.mp3', title: 'Up Next' });
WaveformBar.cycleRepeat();           // off → all → one → off
WaveformBar.toggleFavorite();
WaveformBar.seekToMarkerByLabel('Chorus');
const track = WaveformBar.getCurrentTrack();

Persistence

Play a track, then refresh or visit the product page. The bar restores your queue, position, and state.

Server State

First two cards have data-wb-favorited="true" simulating server-side favorites.

Light Mode

The bar auto-detects theme. See it in action on the light mode page.

Get Started

<script src="https://unpkg.com/@arraypress/waveform-bar@latest/dist/waveform-bar.js"></script>
<button data-wb-play data-url="song.mp3" data-title="My Song">▶ Play</button>
<script>WaveformBar.init();</script>

GitHub NPM