Extend functionality with official add-on libraries
Add playlist and chapter navigation with zero JavaScript. Just HTML markup.
Track meaningful audio engagement, not just clicks. Privacy-focused analytics.
Turn WaveformPlayer into a full playlist system with chapter navigation
Single track with clickable chapter navigation - chapters automatically highlight during playback
Multiple tracks with continuous playback - click any track to play
Multiple tracks, each with their own chapter markers
WaveformPlaylist uses simple HTML markup. No JavaScript required!
Add the playlist script after WaveformPlayer
<script src="waveform-playlist.js"></script>Define your playlist and chapters with data attributes
<div data-waveform-playlist>
<div data-track data-url="song1.mp3">
<div data-chapter data-time="0:30">Verse</div>
<div data-chapter data-time="1:00">Chorus</div>
</div>
</div>The library auto-initializes and handles everything - playback, navigation, UI generation, and state management
Sequential playback with auto-advance
Clickable timestamps for navigation
Auto-play next track when one ends
Individual artwork per track
Shows current playing track
Works with just HTML attributes
npm install @arraypress/waveform-playlist<link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-playlist@latest/dist/waveform-playlist.css">
<script src="https://unpkg.com/@arraypress/waveform-playlist@latest/dist/waveform-playlist.js"></script>Download from GitHub and include the files:
<link rel="stylesheet" href="waveform-playlist.css">
<script src="waveform-playlist.js"></script>Just 4KB gzipped. Works with any WaveformPlayer configuration.
Understand how your audience actually engages with audio content
Only tracks real listens, not bounces. Knows the difference between a click and actual engagement.
No user tracking, cookies, or personal data. Only anonymous content metrics.
Just 2KB gzipped. Minimal performance impact on your site.
Play these tracks and watch the analytics update in real-time:
WaveformTracker provides meaningful data about how people listen:
Track when and how often tracks are played
Distinguish between clicks and actual listens (5+ seconds)
How much of your content people actually consume
Identify where listeners stop engaging
Total time spent listening to your content
Track playback speed preferences
// Initialize tracker
const tracker = new WaveformTracker();
// That's it! Auto-tracks all players on the pagenew WaveformTracker({
adapter: 'google',
category: 'Audio'
});new WaveformTracker({
adapter: 'custom',
endpoint: '/api/audio-analytics',
headers: { 'API-Key': 'your-key' }
});new WaveformTracker({
adapters: ['google', 'plausible', 'custom'],
customEndpoint: '/api/analytics'
});Zero cookies or local storage usage
Anonymous content metrics only
No personal data collection
Process analytics on your own servers
npm install @arraypress/waveform-tracker<script src="https://unpkg.com/@arraypress/waveform-tracker@latest/dist/waveform-tracker.js"></script>Download from GitHub and include:
<script src="waveform-tracker.js"></script>Understand how your audience actually listens. Just 2KB, privacy-focused.
We're working on more ways to extend WaveformPlayer
Synchronized captions and transcripts with search
Q4 2025Social sharing with timestamp links and clips
Q4 2025User-added markers for bookmarks and annotations
Q4 2025