DEV Community

Cover image for Waveform Playlist: Multi-Track Audio Editor for React
jQueryScript
jQueryScript

Posted on

Waveform Playlist: Multi-Track Audio Editor for React

Waveform Playlist: a React library that turns the Web Audio API into a multi-track audio editor right inside the browser.

Key features:

  • Canvas-based waveform rendering with zoom controlsDrag-and-drop clip editing per track
  • 20+ audio effects via Tone.js (reverb, delay, filters, distortion)
  • AudioWorklet-based microphone recording with live preview
  • WAV export for full mix or individual tracks
  • Optional packages for annotations, spectrogram, and recording
  • Full TypeScript support across all six packages

It follows a provider pattern and exposes hooks like useAudioTracks, usePlaylistControls, and useExportWav that fit naturally into a React component tree. Good fit for stem players, podcast editors, or browser DAW prototypes.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)