Free Online Audio Editor: How to Edit, Record, and Master Audio in Your Browser

In an era where web applications are often bloated with massive frameworks and heavy backends, AudioMass emerges as a breath of fresh air for creators. It is a full-featured, open-source audio and waveform editor that lives entirely in your browser.

What makes it truly remarkable? It provides a professional-grade editing suite in a package weighing approximately 65kb of “old-school” vanilla JavaScript—all without a single backend dependency.


A DAW in Your Pocket (Literally)

AudioMass isn’t just a simple trimmer; it is a versatile tool designed for high productivity. Whether you need to record a quick voiceover or master a complex audio track, the interface is dynamic, responsive, and packed with features.

:: Feature Highlights ::

  • Precision Editing: Cut, paste, trim, and navigate waveforms with ease.
  • Visual Feedback: Real-time frequency levels and peak/distortion signaling to keep your audio clean.
  • The FX Rack: Includes compression, paragraphic EQ, reverb, delay, distortion, and pitch shifting.
  • Workflow Ready: Supports over 20 hotkey combinations (like [R] for record) and keeps a full state history for undos.
  • Export & Offline: Export your final product to MP3 and continue working even when you lose your internet connection.

The Story: A Rant on Modern Web Interfaces

Created by developer Pantelis Kalogiros in 2018, AudioMass was born from a desire to see the web return to the high-performance standards of classic Digital Audio Workstations (DAWs).

While modern web development often struggles to animate simple rectangles at 60fps, DAWs like FL Studio or Sonar have managed complex, windowed interfaces for decades. AudioMass draws inspiration from these “dense” interfaces, prioritizing speed and utility over traditional web design trends.

“Many times I feel the web has taken a very wrong turn… I wanted to try and make a fast and performant interface, drawing inspiration from [classic DAWs] rather than traditional web development practices.” — Pantelis Kalogiros


Under the Hood: The Observer Pattern

To keep the code decoupled and fast, AudioMass utilizes the Observer Pattern. Instead of tightly coupling a “Play” button to the audio engine, the system communicates via events: Request, Will, and Did.

  • Request: The user wants to do something (e.g., RequestTogglePlay).
  • Will: The system checks conditions and prepares to act (WillPlay).
  • Did: The action is complete, and the UI updates (DidPlay).

This structure allows the keyboard shortcuts and the UI buttons to function independently but perfectly in sync, without messy “spaghetti” code.


Pro-Tip: The Dockable UI

One of the most impressive technical feats in AudioMass is the Dockable UI. Just like a professional studio setup, you can “pop out” windows into separate browser instances using window.open. By using a clever mix of iframes and parent-window references, AudioMass allows you to spread your workspace across multiple screens while remaining lightweight and performant.

The Future of AudioMass

While it is already a powerhouse, the roadmap for AudioMass includes:

  • Multitrack Support: The ability to mix multiple audio files simultaneously.
  • WASM Optimization: Potential migration to WebAssembly to handle heavy audio processing without UI “crackling.”
  • Background Processing: Moving filters to background threads to prevent interface freezing during heavy renders.

How to Get Started

You don’t need to install a thing.

  1. Navigate to audiomass.co.
  2. Drag and drop an audio file or click “Try Sample.”
  3. Use [Spacebar] to play/stop and [R] to record.
  4. When finished, go to File > Export to mp3.


Discover more from Wiziwiz

Subscribe to get the latest posts sent to your email.