Beautiful audio visualization,
no JavaScript required.
A small, zero-dependency family for the web — a canvas waveform player, a persistent bottom bar, playlists, a sample-pack sound browser, analytics and build-time tooling. Add a few data attributes and ship.
$ npm i @arraypress/waveform-player Pick your package manager — or hand it to your agent.
~12KB gzipped · Zero dependencies · 6 visual styles · MIT licensed
In WordPress core
The Playlist block in WordPress 7.1 draws its waveforms with WaveformPlayer.
WordPress 7.1 "Mary Lou" shipped on 19 August 2026 with a Playlist block in core, and the waveform inside it is @arraypress/waveform-player, bundled straight into the core block library — no plugin, no build step. The block's Visualization style dropdown is the same six styles you get here: bars, mirror, line, blocks, dots and seekbar.
Zero config
Drop in a <div>. That's the whole setup.
No bundler, no framework, no init call. Include the script, add attributes, and every matching element becomes a player on load.
<link rel="stylesheet"
href="https://unpkg.com/@arraypress/waveform-player/dist/waveform-player.css">
<script src="https://unpkg.com/@arraypress/waveform-player"></script>
<div data-waveform-player
data-url="track.mp3"
data-artwork="cover.webp"
data-title="Midnight Dreams"
data-artist="The Wavelength"
data-waveform-style="mirror"
data-show-bpm="true"
data-bpm="120"></div>Six visual styles
One attribute switches the look.
bars · mirror · line · blocks · dots · seekbar — every style reads the same waveform data and adapts to your theme.
data-waveform-style="bars" data-waveform-style="mirror" data-waveform-style="line" data-waveform-style="blocks" data-waveform-style="dots" data-waveform-style="seekbar" New in v1.10
A compact layout for sample packs.
The preview
layout centers the title under the waveform and trims the controls — drop a grid of them into any sample or beat store.
Built for the modern web
Everything you need, nothing you don't.
Zero JavaScript
Add a few data attributes to any element. Auto-initializes on load — no build step, no wiring.
~12KB gzipped
The whole core, zero dependencies. Canvas rendering, controls and keyboard support included.
Media Session
Lock-screen artwork and hardware media keys via the Media Session API, out of the box.
Keyboard ready
Space, arrows, number keys and an accessible seek slider — fully operable without a mouse.
Playback speed
Per-player speed control with configurable rates — built for podcasts and courses.
Auto theme
Detects the surrounding background and adapts its palette. Dark, light, or anything between.
The family
One core. A whole audio toolkit.
The player is the foundation — extensions snap on to cover real-world products: a persistent bar, playlists, a sound browser, analytics, and a peaks generator.
A persistent, Spotify-style bottom bar.
Queue, volume, repeat, favorites, cart and DJ markers — with cross-page session persistence. Pick a track to launch the real bar.
- Play queue
- Favorites & cart
- Repeat modes
- Session persistence
Playlists and chapters, from markup.
Turn a list of tracks into a full album or podcast player with artwork, durations and chapter navigation — keyboard-accessible out of the box.
- Track list + artwork
- Chapter markers
- Continuous play
- N / P / 1–9 keys
Album
Podcast series · tracks + chapters
A sound browser for sample packs.
A searchable, filterable list of previews with a mini waveform per row — and one shared player underneath, however many sounds the pack has. Play one, then press ↓ to hear the next.
- Search + filters
- Type, key, BPM
- ↑ / ↓ auditioning
- One audio engine
- Drum LoopLoopDrum loops1280:03
- Electric PianoKeys1260:07
- House PianoKeys126C#m0:07
- Too YoungLeads1210:07
- PlankPlucks121Eb0:07
- Spaces In BetweenPlucks121Bb0:07
- Too YoungPlucks121Gm0:07
No sounds match.
Know what's actually heard.
Privacy-first engagement analytics — credits real media-time, ignores seeks, no cookies. Send to any endpoint or handler.
Pre-compute peaks at build time.
A tiny Node CLI that turns audio into peak JSON (and BPM) so players paint instantly — no client-side Web Audio decode.
Framework wrappers
Typed components for Astro, React, Vue, and Svelte.
The same player, the ergonomics you expect — every option as a typed prop, SSR-safe, with the core left untouched.
---
import WaveformPlayer from '@arraypress/waveform-player-astro';
---
<WaveformPlayer
src="/track.mp3"
title="Midnight Dreams"
waveformStyle="mirror"
showBPM
/>import { WaveformPlayer } from '@arraypress/waveform-player-react';
export function Track() {
return (
<WaveformPlayer
url="/track.mp3"
title="Midnight Dreams"
waveformStyle="mirror"
showBPM
/>
);
}22 packages
The whole family, on npm.
Mix and match — install only what you need. Every package is public, MIT-licensed and dependency-light.
WaveformPlayer~14KB
The zero-config core. Canvas waveform player with six visual styles, keyboard control and Media Session — vanilla JS, zero dependencies.
CoreWaveformBar~13KB
Persistent Spotify-style bottom bar — queue, volume, repeat, favorites, cart, DJ markers and cross-page session persistence.
ExtensionWaveformPlaylist~7KB
Playlist and chapter navigation — podcasts, courses, albums and audiobooks. Fully keyboard-accessible.
ExtensionWaveformSounds~14KB
Searchable, filterable sound list for sample packs — a mini waveform per row, type / key / BPM filters, keyboard auditioning and one shared audio engine.
ExtensionWaveformTracker~2KB
Privacy-first listen analytics. Credits real media-time engagement, ignores seeks, no cookies — send to any endpoint.
ExtensionWaveformGen
Node CLI + library to pre-generate waveform peaks (and BPM) from audio files — instant render, no client-side decode.
ToolingPlayer · Astro
Typed Astro component wrapper with lazy IntersectionObserver mounting.
FrameworkPlayer · React
React wrapper — forwardRef imperative handle and typed props.
FrameworkBar · Astro
<WaveformBar> + <WaveformBarTrigger> components for Astro.
FrameworkBar · React
<WaveformBar> + <WaveformBarTrigger> components for React.
FrameworkPlaylist · Astro
Typed <WaveformPlaylist> for Astro — tracks and chapters as props.
FrameworkPlaylist · React
React <WaveformPlaylist> — typed tracks/chapters and a ref handle.
FrameworkPlayer · Vue
Vue 3 wrapper — typed props, event emits and a template-ref imperative handle.
FrameworkPlayer · Svelte
Svelte 5 wrapper — typed props, callback props and exported instance methods.
FrameworkBar · Vue
<WaveformBar> + <WaveformBarTrigger> components for Vue 3.
FrameworkBar · Svelte
<WaveformBar> + <WaveformBarTrigger> components for Svelte 5.
FrameworkPlaylist · Vue
Vue 3 <WaveformPlaylist> — declarative tracks/chapters and a ref handle.
FrameworkPlaylist · Svelte
Svelte 5 <WaveformPlaylist> — declarative tracks/chapters and exported nav methods.
FrameworkSounds · Astro
Server-rendered <WaveformSounds> for Astro — the runtime adopts the markup, ClientRouter-safe.
FrameworkSounds · React
React <WaveformSounds> — typed props, callback props and an imperative ref handle.
FrameworkSounds · Vue
Vue 3 <WaveformSounds> — typed props, lifecycle emits and an exposed API.
FrameworkSounds · Svelte
Svelte 5 <WaveformSounds> — typed props, callback props and exported instance methods.
FrameworkUse cases in 2026
What people build with it in 2026.
From sample packs and beat stores to podcasts, audiobooks and AI voice — a lightweight waveform audio player that drops into any product with a script and a <div>. Accessible, keyboard-first and MIT-licensed.
Sample & loop stores
Preview sample packs, loops and one-shots on Shopify, WooCommerce or any storefront — pre-computed peaks paint the waveform instantly, no decode.
Beat marketplaces
Sell beats and type beats with a persistent play bar, queue and add-to-cart triggers — straight from markup, no framework required.
Podcasts
Ship podcast episode players with chapters, variable playback speed and Media Session lock-screen controls out of the box.
Audiobooks
Long-form audiobook and chaptered narration players with resumable position and keyboard-first seeking.
AI voice & TTS
Showcase AI voiceovers, text-to-speech and voice-cloning demos with a clean waveform and instant scrubbing.
Courses & e-learning
Audio lessons, language practice and lecture recordings with chapters and full keyboard control — accessible to every learner.
Musicians & labels
Embed releases, EPs and demos as album playlists with per-track artwork and BPM — from plain HTML.
DJ mixes & radio
Continuous DJ mixes and radio shows with cue markers, gapless queue advance and cross-page playback persistence.
Sound effects & SFX
Browse sound-effect and foley libraries where the waveform shape is the fastest way to find the right hit.
Meditation & wellness
Sleep sounds, ambient tracks and guided-meditation apps with a calm, monochrome player that matches any theme.
Publishers & news
Listen-to-this-article audio and AI voice summaries that adapt to light or dark page themes automatically.
Voice notes & social
Voice messages, audio comments and UGC waveforms in social and messaging apps — tiny footprint, framework-agnostic.
How it compares
A toolkit, not just a waveform.
| WaveformPlayer | WaveSurfer.js | Amplitude.js | |
|---|---|---|---|
| Zero-config HTML | |||
| Canvas waveform | |||
| Six visual styles | |||
| Media Session API | |||
| Persistent bottom bar | |||
| Playlist + chapters | |||
| Filterable sound list | |||
| Listen analytics | |||
| Accessibility + keyboard | |||
| Framework wrappers | |||
| Zero dependencies |
Capability comparison; each library has its own strengths.
Framework agnostic