Just add data attributes to any div. Auto-initialization, responsive design, and stunning waveforms out of the box. ~8KB gzipped.
No build tools. No configuration. Just HTML.
<link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-player@latest/dist/waveform-player.css">
<script src="https://unpkg.com/@arraypress/waveform-player@latest/dist/waveform-player.js"></script><div data-waveform-player
data-url="your-audio.mp3"
data-title="Song Title">
</div>No initialization. No configuration. It auto-initializes when the page loads.
Customize Your Playernpm install @arraypress/waveform-player<link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-player@latest/dist/waveform-player.css">
<script src="https://unpkg.com/@arraypress/waveform-player@latest/dist/waveform-player.js"></script><link rel="stylesheet" href="waveform-player.css">
<script src="waveform-player.js"></script>Six beautiful visualization styles. One line to change them.
data-waveform-style="bars"
data-waveform-style="mirror"
data-waveform-style="line"
data-waveform-style="blocks"
data-waveform-style="dots"
data-waveform-style="seekbar"
Adapts to any website's theme automatically. Dark, light, or custom - it just works.
Everything you need, nothing you don't
Works with just HTML data attributes. Perfect for WordPress, static sites, or any CMS.
Smaller than most images. No jQuery, no dependencies, pure vanilla JavaScript.
System integration for lock screens, hardware keys, and bluetooth controls.
Full keyboard navigation with space, arrows, and number keys for accessibility.
Variable playback speed for podcasts and audiobooks (0.5x to 2x).
Add clickable markers for navigation through long audio content.
Automatically adapts to your site's light or dark theme. No configuration needed.
WaveformPlayer vs. the alternatives
| Feature | WaveformPlayer | WaveSurfer.js | Amplitude.js |
|---|---|---|---|
| Size (gzipped) | ~8KB | 40KB+ | 35KB+ |
| Zero Config | ✅ | ❌ | ❌ |
| Dependencies | None | None | None |
| Real Waveforms | ✅ | ✅ | ❌ |
| Visual Styles | 6 Built-in | 3 | N/A |
| Setup Time | 30 seconds | 5+ minutes | 5+ minutes |
| Media Session API | ✅ | ❌ | ❌ |
| Speed Control | ✅ | ✅ | ❌ |
WaveformPlayer adapts to your needs
Use with any framework or vanilla JavaScript
Join thousands of developers using WaveformPlayer