How to set up recording with Waveform Playlist?

You need to install the @waveform-playlist/recording package and configure AudioWorklet processors, which involves additional setup steps as detailed in the documentation for latency compensation and live preview.

Waveform Playlist vs Wavesurfer.js for audio editing?

Waveform Playlist excels in multi-track editing and professional effects via Tone.js, while Wavesurfer.js is better for simpler waveform visualization and playback; choose based on need for advanced editing features.

Can Waveform Playlist handle MIDI files?

Yes, via the optional @waveform-playlist/midi package, it supports MIDI file parsing, piano roll visualization, and SoundFont sample playback for integrated audio and MIDI workflows.

How to export audio with effects in Waveform Playlist?

Use the useExportWav hook to export WAV files with applied effects, allowing for individual track or full mix exports with real-time processing as shown in the examples.

Is Waveform Playlist suitable for mobile browsers?

It depends on Web Audio API support and device performance; while functional on modern mobile browsers, complex editing and effects might strain lower-end devices due to audio processing overhead.

What are the performance implications of using Waveform Playlist?

Performance can be impacted by the use of Tone.js and canvas rendering, especially with multiple tracks and real-time effects, requiring optimization for smooth operation on all devices.

Open-Awesome

waveform-playlist

MITTypeScriptv12.0.0

A multi-track audio editor and player for the web with canvas waveform preview, drag-and-drop editing, and Tone.js effects.

Visit Website GitHub

1.6k stars308 forks0 contributors

What is waveform-playlist?

Waveform Playlist is a multi-track audio editor and player built for the web using React, Tone.js, and the Web Audio API. It provides canvas-based waveform visualization, drag-and-drop clip editing, and professional audio effects, enabling developers to create browser-based audio editing applications. The project solves the need for a flexible, open-source tool to build audio workstations or editing interfaces directly in the browser.

Target Audience

Frontend developers and audio engineers building web-based audio editing applications, digital audio workstations (DAWs), or interactive audio players. It's also suitable for projects requiring in-browser audio manipulation, such as podcast editors, music production tools, or educational audio platforms.

Value Proposition

Developers choose Waveform Playlist for its comprehensive feature set, modular architecture, and seamless integration with modern web technologies. Its unique selling point is the combination of a React-based UI with a powerful, framework-agnostic audio engine, offering both ease of use for React developers and flexibility for custom implementations via Web Components.

Overview

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.

Use Cases

Best For

Building web-based digital audio workstations (DAWs)
Creating interactive audio editing interfaces for podcasts or music
Developing educational platforms with audio annotation capabilities
Integrating multi-track audio playback with waveform visualization in web apps
Adding professional audio effects and recording features to browser applications
Implementing MIDI file playback and piano roll visualization in web projects

Not Ideal For

Projects needing a simple, single-track audio player without editing features
Applications targeting legacy browsers lacking Web Audio API support
Teams preferring zero-configuration, drop-in components with no dependency management
Server-side rendered apps where heavy client-side JavaScript and audio APIs are problematic

Pros & Cons

Pros

Modular Architecture

Separates audio engine from UI with framework-agnostic packages like @waveform-playlist/engine, allowing flexible use across React or Web Components, as shown in the experimental @dawcore/components.

Professional Audio Effects

Integrates over 20 Tone.js effects including reverb and delay, enabling real-time parameter control and high-quality audio processing directly in the browser.

Comprehensive Editing Features

Supports multi-track editing with drag-to-move and trim, plus annotations and MIDI playback with piano roll visualization, catering to complex audio workflows.

Recording and Export

Offers AudioWorklet-based recording with live waveform preview and WAV export for individual tracks or full mixes, suitable for professional audio applications.

Cons

Complex Setup

Requires manual installation of peer dependencies like Tone.js and @dnd-kit/react, and optional packages for features like recording add configuration overhead.

Browser Limitations

Relies on Web Audio API, limiting support to modern browsers and excluding legacy environments without fallbacks, as noted in the browser support section.

Experimental Features

The Web Components version (@dawcore/components) is labeled experimental, indicating potential instability and lack of production-ready guarantees.

Open Source Alternative To

waveform-playlist is an open-source alternative to the following products:

Audacity

Audacity is a free, open-source digital audio editor and recording application for Windows, macOS, and Linux. It provides tools for recording, editing, mixing, and applying effects to audio files.

Frequently Asked Questions

Related Projects

Vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Stars209,800

Forks33,842

Last commit1 year ago

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Stars120,999

Forks17,149