WaveformPlayer

Zero-config audio waveforms for the web. Add a data- attribute to a <div> and get a real, interactive waveform player. No build step, no dependencies.

Documentation · npm

---

Install

npm install @arraypress/waveform-player

Load from a CDN and it auto-initializes every [data-waveform-player] on the page:

<link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-player/dist/waveform-player.css">
<script src="https://unpkg.com/@arraypress/waveform-player/dist/waveform-player.min.js"></script>

<div data-waveform-player data-url="track.mp3" data-title="My Song" data-artist="The Artist"></div>

Or drive it from JavaScript:

import WaveformPlayer from '@arraypress/waveform-player';

new WaveformPlayer('#player', { url: 'track.mp3', title: 'My Song', artist: 'The Artist' });

Documentation

Every option, style, event and method is documented on the docs site.

-> docs.waveformplayer.com

Options · Waveform styles · Events · Methods · Accessibility

Extensions: Bar · Playlist · Tracker · Gen — Frameworks: React · Vue · Svelte · Astro

License

MIT © ArrayPress