https://github.com/naomiaro/waveform-playlist
Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Add effects from Tone.js. Project inspired by Audacity.
https://github.com/naomiaro/waveform-playlist
annotations audio audio-player audio-visualizer audiorecorder audioworklet daw harmony music playback playlist tonejs waveform webaudio
Last synced: 2 days ago
JSON representation
Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Add effects from Tone.js. Project inspired by Audacity.
- Host: GitHub
- URL: https://github.com/naomiaro/waveform-playlist
- Owner: naomiaro
- License: mit
- Created: 2013-02-12T00:37:03.000Z (about 13 years ago)
- Default Branch: main
- Last Pushed: 2026-02-25T06:47:13.000Z (12 days ago)
- Last Synced: 2026-02-25T06:50:00.994Z (12 days ago)
- Topics: annotations, audio, audio-player, audio-visualizer, audiorecorder, audioworklet, daw, harmony, music, playback, playlist, tonejs, waveform, webaudio
- Language: TypeScript
- Homepage: https://naomiaro.github.io/waveform-playlist/
- Size: 63.4 MB
- Stars: 1,609
- Watchers: 61
- Forks: 307
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Agents: AGENTS.md
Awesome Lists containing this project
- awesome-canvas - waveform-playlist - playlist/)] - Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Project inspired by Audacity.   (Libraries / Waveforms animation)
- awesome-javascript-audio - waveform-playlist - very nice multi-track WAV editor, similar to Audacity :) (Sound editing / Sound samplers:)
- awesome-webaudio - waveform-playlist - Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Project inspired by Audacity. (Packages / Apps)
- awesome-game-engine-dev - Waveform Playlist - Multitrack web audio editor and player with canvas waveform preview. (Libraries / JavaScript)
- awesome-frontend - waveform-playlist - Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV!.  (Repository / Animation)
README
# Waveform Playlist
[](https://www.npmjs.com/package/waveform-playlist)
A multi-track audio editor and player built with React, Tone.js, and the Web Audio API. Features canvas-based waveform visualization, drag-and-drop clip editing, and professional audio effects.
## Features
- **Multi-track editing** - Multiple clips per track with drag-to-move and trim
- **Waveform visualization** - Canvas-based rendering with zoom controls
- **20+ audio effects** - Reverb, delay, filters, distortion, and more via Tone.js
- **Recording** - AudioWorklet-based recording with live waveform preview
- **Export** - WAV export with effects, individual tracks or full mix
- **Annotations** - Time-synced text annotations with keyboard navigation
- **Theming** - Full theme customization with dark/light mode support
- **TypeScript** - Full type definitions included
## Quick Start
```bash
npm install @waveform-playlist/browser tone @dnd-kit/core @dnd-kit/modifiers
```
> **Note**: `tone`, `@dnd-kit/core`, and `@dnd-kit/modifiers` are peer dependencies and must be installed separately.
```tsx
import { WaveformPlaylistProvider, Waveform, PlayButton, PauseButton, StopButton } from '@waveform-playlist/browser';
import { createTrack, createClipFromSeconds } from '@waveform-playlist/core';
function App() {
const [tracks, setTracks] = useState([]);
// Load audio and create tracks
useEffect(() => {
async function loadAudio() {
const response = await fetch('/audio/song.mp3');
const arrayBuffer = await response.arrayBuffer();
const audioContext = new AudioContext();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
const track = createTrack({
name: 'My Track',
clips: [createClipFromSeconds({ audioBuffer, startTime: 0 })],
});
setTracks([track]);
}
loadAudio();
}, []);
return (
);
}
```
## Documentation
- [**Live Examples**](https://naomiaro.github.io/waveform-playlist/examples/stem-tracks) - Interactive demos
- [**Getting Started**](https://naomiaro.github.io/waveform-playlist/docs/getting-started/installation) - Installation and basic usage
- [**Guides**](https://naomiaro.github.io/waveform-playlist/docs/guides/loading-audio) - In-depth tutorials
- [**API Reference**](https://naomiaro.github.io/waveform-playlist/docs/api/provider) - Component and hook documentation
## Examples
| Example | Description |
|---------|-------------|
| [Stem Tracks](https://naomiaro.github.io/waveform-playlist/examples/stem-tracks) | Multi-track playback with mute/solo/volume controls |
| [Effects](https://naomiaro.github.io/waveform-playlist/examples/effects) | 20 Tone.js effects with real-time parameter control |
| [Recording](https://naomiaro.github.io/waveform-playlist/examples/recording) | Live recording with VU meter and waveform preview |
| [Multi-Clip](https://naomiaro.github.io/waveform-playlist/examples/multi-clip) | Drag-and-drop clip editing with trim handles |
| [Annotations](https://naomiaro.github.io/waveform-playlist/examples/annotations) | Time-synced text with keyboard navigation |
| [Waveform Data](https://naomiaro.github.io/waveform-playlist/examples/waveform-data) | Pre-computed peaks for fast loading |
## Packages
v5 packages:
| Package | Description |
|---------|-------------|
| `@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](https://naomiaro.github.io/waveform-playlist/docs/guides/recording#audioworklet-setup)) |
## Key Hooks
```tsx
// Load audio files into tracks
const { tracks, loading, error } = useAudioTracks([
{ src: '/audio/vocals.mp3', name: 'Vocals' },
{ src: '/audio/drums.mp3', name: 'Drums' },
]);
// Playback controls
const { play, pause, stop, seek, isPlaying } = usePlaylistControls();
// Zoom controls
const { zoomIn, zoomOut, samplesPerPixel } = useZoomControls();
// Master effects chain
const { masterEffectsFunction, toggleEffect, updateParameter } = useDynamicEffects();
// WAV export
const { exportWav, isExporting, progress } = useExportWav();
// Recording
const { startRecording, stopRecording, isRecording } = useIntegratedRecording();
```
## Browser Support
Requires Web Audio API support: Chrome, Firefox, Safari, Edge (modern versions).
See [Can I Use: Web Audio API](https://caniuse.com/audio-api)
## Development
```bash
# Install dependencies
pnpm install
# Start dev server
pnpm start
# Run tests
pnpm test
# Build all packages
pnpm build
```
Visit http://localhost:3000/waveform-playlist to see the examples.
## Books
Currently writing: [Mastering Tone.js](https://leanpub.com/masteringtonejs)
## Credits
Originally created for the [Airtime](https://www.sourcefabric.org/software/airtime/) project at [Sourcefabric](https://www.sourcefabric.org/).
## License
[MIT License](http://doge.mit-license.org)
## Sponsors
