In simple English
This library lets you build a web page where people can edit audio tracks. Users can move clips around, cut them, add sound effects, and record new audio right in the browser. You get visual waveforms on the screen that show the sound waves as pictures. It helps you make audio apps without starting from scratch. It is free to use under an MIT licence.
What it is
A modular toolkit for React and web components that turns web browsers into multi-track audio editors. It includes timeline management, audio effects, recording, and visual waveform rendering.
What it is good for
Solo builders who want to create podcast editors, music mixers, or voice recording tools for the web. It saves you from writing complex audio scheduling and waveform drawing code by yourself.
- Supports multiple audio tracks with drag-and-drop editing and trim handles.
- Includes dozens of audio effects and sound filters through Tone.js integration.
- Provides tools for live audio recording and exporting mixes to WAV files.
- Requires good knowledge of React and JavaScript to set up and customize.
- Managing audio buffers and browser autoplay rules takes careful testing.
- Depends on several external packages that you must install and keep updated.
Writing custom Web Audio API node graphs and waveform drawing logic from scratch
tone
- katspaugh/wavesurfer.js10k stars
A popular library for rendering interactive audio waveforms and playing sound files in the browser.
- Tonejs/Tone.js15k stars
A framework for creating interactive music and audio in the browser that this project uses for effects.
- motion-canvas/motion-canvas19k stars
A code-written animation tool with a live editor, for explanatory videos built from shapes and text.
- paulpacifico/shutter-encoder2.8k stars
A desktop window over FFmpeg for converting, trimming and processing video, audio and images.
- htekdev/vidpipe232 stars
It watches a folder for recordings and produces captions, clips and draft social posts from each one.
npm install @waveform-playlist/browser @waveform-playlist/playout tone @dnd-kit/react