Beautiful audio visualization,
no JavaScript required.
A small, zero-dependency family for the web â a canvas waveform player, a persistent bottom bar, playlists, 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
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, 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
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
/>
);
}17 packages
The whole family, on npm.
Mix and match â install only what you need. Every package is public, MIT-licensed and dependency-light.
WaveformPlayer~12KB
The zero-config core. Canvas waveform player with six visual styles, keyboard control and Media Session â vanilla JS, zero dependencies.
CoreWaveformBar~6KB
Persistent Spotify-style bottom bar â queue, volume, repeat, favorites, cart, DJ markers and cross-page session persistence.
ExtensionWaveformPlaylist~4KB
Playlist and chapter navigation â podcasts, courses, albums and audiobooks. Fully keyboard-accessible.
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.
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 | |||
| Listen analytics | |||
| Accessibility + keyboard | |||
| Framework wrappers | |||
| Zero dependencies |
Capability comparison; each library has its own strengths.
Framework agnostic