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.
~10KB 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.
~10KB 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~10KB
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