Explore all the features and styles of WaveformPlayer
Choose the perfect style for your content
data-waveform-style="bars"
data-bar-width="4"
data-bar-spacing="1"data-waveform-style="mirror"
data-bar-width="1"
data-samples="400"data-waveform-style="line"
data-samples="200"data-waveform-style="blocks"
data-bar-width="3"
data-bar-spacing="1"data-waveform-style="dots"
data-bar-width="2"
data-bar-spacing="2"data-waveform-style="seekbar"Everything you need for a complete audio experience
Shows on lock screens, media keys work, bluetooth controls supported
Try: Space (play), ←→ (seek), ↑↓ (volume), M (mute), 0-9 (position)
Perfect for podcasts and audiobooks. Click speed button to adjust.
Automatic tempo detection for rhythmic content
Add clickable markers for navigation through content
Display album covers alongside your player
Control players with JavaScript API
const player = WaveformPlayer.getInstance('controlled-player');
player.play();
player.pause();
player.seekToPercent(0.5);
player.setVolume(0.5);Power user features for complex implementations
Generate waveform data server-side for instant display without processing
// Generate once on server
const waveformData = await WaveformPlayer.generateWaveformData('audio.mp3', 200);
// Use cached data for instant display
new WaveformPlayer('#player', {
url: 'audio.mp3',
waveform: waveformData // No client-side processing!
});Create clickable timestamps in your content
Manage multiple players with single-play mode
Playing one automatically pauses others (single-play mode enabled by default)
Match your brand with custom colors