ZERO-CONFIG AUDIO PLAYER

Beautiful Audio Visualization
No JavaScript Required

Just add data attributes to any div. Auto-initialization, responsive design, and stunning waveforms out of the box. ~8KB gzipped.

~8KB Gzipped
Zero Dependencies
6 Visual Styles
MIT License
QUICK START

Get Started in 30 Seconds

No build tools. No configuration. Just HTML.

1

Include the Files

<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>
2

Add a Player

<div data-waveform-player
     data-url="your-audio.mp3"
     data-title="Song Title">
</div>
3

That's It!

No initialization. No configuration. It auto-initializes when the page loads.

Customize Your Player 
npm 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>
Download Latest Release
6 STYLES

Choose Your Style

Six beautiful visualization styles. One line to change them.

Bars

data-waveform-style="bars"

Mirror

data-waveform-style="mirror"

Line

data-waveform-style="line"

Blocks

data-waveform-style="blocks"

Dots

data-waveform-style="dots"

Seekbar

data-waveform-style="seekbar"
See All Examples
WHY CHOOSE

Built for Modern Web

Everything you need, nothing you don't

Zero JavaScript

Works with just HTML data attributes. Perfect for WordPress, static sites, or any CMS.

~8KB Gzipped

Smaller than most images. No jQuery, no dependencies, pure vanilla JavaScript.

Media Session API

System integration for lock screens, hardware keys, and bluetooth controls.

Keyboard Controls

Full keyboard navigation with space, arrows, and number keys for accessibility.

Speed Control

Variable playback speed for podcasts and audiobooks (0.5x to 2x).

Chapter Markers

Add clickable markers for navigation through long audio content.

COMPARISON

How We Stack Up

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 ✅ ✅ ❌
USE CASES

Perfect For

WaveformPlayer adapts to your needs

Podcasters

  • Episode players with chapters
  • Variable speed playback
  • Transcript timestamps

Musicians

  • Album & single players
  • Beautiful visualizations
  • Playlist support

Educators

  • Lesson navigation
  • Progress tracking
  • Speed control for lectures

Publishers

  • Audiobook chapters
  • Bookmark positions
  • Reading speed control

Beat Stores

  • Preview beat libraries
  • Watermarked samples
  • BPM display

Sound Designers

  • SFX & preset previews
  • Sample pack demos
  • Loop libraries

Radio Stations

  • Live stream players
  • Show archives
  • Segment markers

Voice Messages

  • Support tickets
  • Customer testimonials
  • Team communications

Language Learning

  • Pronunciation guides
  • Dialog practice
  • Adjustable playback speed
WORKS EVERYWHERE

Framework Agnostic

Use with any framework or vanilla JavaScript

WordPress
React
Vue
Angular
Shopify
HTML
View Integration Guides

Ready to Upgrade Your Audio Players?

Join thousands of developers using WaveformPlayer

View on GitHub Install via NPM