Quickstart
Get up and running with a basic waveform player in minutes
Installation
Install the library and its peer dependencies
Live examples
Explore interactive demos and code samples
API reference
Detailed documentation for all components and hooks
Key features
Multi-track editing
Multiple clips per track with drag-to-move and trim functionality for professional audio editing workflows
Waveform visualization
Canvas-based rendering with zoom controls and real-time playback animation
20+ audio effects
Reverb, delay, filters, distortion, and more via Tone.js with real-time parameter control
Recording
AudioWorklet-based recording with live waveform preview and VU meter
Export
WAV export with effects applied, export individual tracks or full mix
Annotations
Time-synced text annotations with keyboard navigation and playback integration
Theming
Full theme customization with dark/light mode support and gradient colors
TypeScript
Full type definitions included for enhanced developer experience
Architecture
Waveform Playlist is designed as a modular monorepo with separate packages for different functionalities:- @waveform-playlist/browser - Main React components, hooks, and context
- @waveform-playlist/core - Types, utilities, and clip/track creation
- @waveform-playlist/ui-components - Styled UI components (buttons, sliders, etc.)
- @waveform-playlist/playout - Tone.js audio engine
- @waveform-playlist/annotations - Optional annotation support
- @waveform-playlist/recording - Optional recording support (requires AudioWorklet setup)
Browser support
Waveform Playlist requires Web Audio API support, which is available in all modern browsers:- Chrome (desktop and mobile)
- Firefox (desktop and mobile)
- Safari (desktop and mobile)
- Edge (Chromium-based)
See Can I Use: Web Audio API for detailed browser compatibility information.
Next steps
Install the library
Follow the installation guide to add Waveform Playlist to your project
Build your first player
Complete the quickstart tutorial to create a working waveform player
Explore examples
Check out the live examples to see what’s possible