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: 7 days ago
JSON representation

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-03-07T10:24:36.000Z (about 1 month ago)
Last Synced: 2026-03-07T15:53:00.608Z (about 1 month 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: 72.5 MB
Stars: 1,614
Watchers: 59
Forks: 307
Open Issues: 5
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. ![](https://img.shields.io/github/stars/naomiaro/waveform-playlist?style=social) ![](https://img.shields.io/github/forks/naomiaro/waveform-playlist?style=social) (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!. ![](https://img.shields.io/github/stars/naomiaro/waveform-playlist?style=social) (Repository / Animation)

README

          # 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

- **MIDI playback** - MIDI file parsing with piano roll visualization and SoundFont sample playback

- **TypeScript** - Full type definitions included

## Quick Start

```bash

npm install @waveform-playlist/browser tone @dnd-kit/react

```

> **Note**: `tone` and `@dnd-kit/react` are peer dependencies and must be installed separately. `@dnd-kit/dom` and `@dnd-kit/abstract` are transitive dependencies of `@dnd-kit/react`.

```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 |

| [MIDI](https://naomiaro.github.io/waveform-playlist/examples/midi) | MIDI file playback with piano roll and SoundFont samples |

| [Beats & Bars](https://naomiaro.github.io/waveform-playlist/examples/beats-and-bars) | Tempo-synced timescale with beats and bars ruler |

| [Fades](https://naomiaro.github.io/waveform-playlist/examples/fades) | Fade in/out with configurable curves |

| [Stereo](https://naomiaro.github.io/waveform-playlist/examples/stereo) | Stereo waveform rendering and pan controls |

| [Spectrogram](https://naomiaro.github.io/waveform-playlist/examples/mir-spectrogram) | FFT-based spectrogram visualization |

| [Media Element](https://naomiaro.github.io/waveform-playlist/examples/media-element) | HTMLMediaElement playout with playback rate |

| [Styling](https://naomiaro.github.io/waveform-playlist/examples/styling) | Bar width, gaps, gradients, and theme colors |

| [Flexible API](https://naomiaro.github.io/waveform-playlist/examples/flexible-api) | Custom playheads, timestamps, and full UI customization |

## Packages

| Package | Description |

|---------|-------------|

| `@waveform-playlist/browser` | Main React components, hooks, and context |

| `@waveform-playlist/core` | Types, utilities, and clip/track creation |

| `@waveform-playlist/engine` | Framework-agnostic timeline engine with pure operations |

| `@waveform-playlist/ui-components` | Styled UI components (buttons, sliders, etc.) |

| `@waveform-playlist/playout` | Tone.js audio engine |

| `@waveform-playlist/webaudio-peaks` | Peak extraction from AudioBuffer or sample arrays |

| `@waveform-playlist/loaders` | Audio loaders |

**Optional packages:**

| Package | Description |

|---------|-------------|

| `@waveform-playlist/midi` | MIDI file parsing, piano roll visualization, and SoundFont playback |

| `@waveform-playlist/annotations` | Time-synced text annotations with drag editing |

| `@waveform-playlist/recording` | AudioWorklet recording with live waveform preview (requires [setup](https://naomiaro.github.io/waveform-playlist/docs/guides/recording#audioworklet-setup)) |

| `@waveform-playlist/worklets` | Shared AudioWorklet processors for metering and recording (auto-installed with recording) |

| `@waveform-playlist/spectrogram` | Spectrogram visualization with FFT worker |

| `@waveform-playlist/media-element-playout` | HTMLMediaElement-based playout with pitch-preserving playback rate |

## 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, seekTo } = usePlaylistControls();

// Playback animation (60fps updates)

const { currentTime, isPlaying } = usePlaybackAnimation();

// Zoom controls

const { zoomIn, zoomOut, samplesPerPixel } = useZoomControls();

// Master effects chain

const { masterEffects, toggleBypass, updateParameter } = useDynamicEffects();

// WAV export

const { exportWav, isExporting, progress } = useExportWav();

// Recording

const { startRecording, stopRecording, isRecording } = useIntegratedRecording();

```

## Web Components (Experimental)

`@dawcore/components` provides framework-agnostic Web Components for multi-track audio editing — no React required. Built with Lit, using `@dawcore/transport` for native Web Audio playback (no Tone.js dependency).

```bash

npm install @dawcore/components

```

```html

  import '@dawcore/components';

  

    

  

  

  

  

  

  

```

**Features:**

- Declarative `` and `` elements with auto-loading

- Clip move, trim, and split with collision detection

- Undo/redo with transaction-based grouping

- Keyboard shortcuts (Space=play/pause, S=split, Cmd/Ctrl+Z=undo)

- File drop for adding tracks

- Recording with overdub and latency compensation

- Metronome with mixed meters and tempo changes

- Tempo automation — linear ramps and Möbius-Ease curves with exact integration

- Pre-computed peaks for fast initial render

- Native Web Audio — no Tone.js, full `sampleRate` and `latencyHint` control

**Packages:**

| Package | Description |

|---------|-------------|

| `@dawcore/components` | Lit Web Components for multi-track editing |

| `@dawcore/transport` | Native Web Audio transport — scheduling, looping, tempo automation, time signatures, metronome |

Run the examples locally:

```bash

cd packages/dawcore && pnpm dev:page

```

Then open `http://localhost:5173/dev/` — example pages:

- [`index.html`](packages/dawcore/dev/index.html) — Basic playback with timescale and file drop

- [`multiclip.html`](packages/dawcore/dev/multiclip.html) — Multi-clip editing with move, trim, and split

- [`record.html`](packages/dawcore/dev/record.html) — Recording with overdub

- [`metronome.html`](packages/dawcore/dev/metronome.html) — Metronome with mixed meters, tempo presets, and looping sequences

- [`automation.html`](packages/dawcore/dev/automation.html) — Tempo automation with step, linear, and curve presets

## 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



  

    

  





  Become a sponsor

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/naomiaro/waveform-playlist

Awesome Lists containing this project

README