Building a Browser-Based Multitrack Audio Editor: AudioWorklet and SharedArrayBuffer

Building a digital audio workstation (DAW) in the browser requires resolving one of the most difficult challenges in systems engineering: low-latency, lock-free thread synchronization.

If you try to read multiple audio tracks from standard JavaScript memory, mix them, and render effects on the main UI thread, you will inevitably drop samples, leading to loud, unpleasant pops and clicks (known as Audio Glitch / Buffer Underrun).

To build a professional, studio-quality multitrack audio editor, we must decouple the audio rendering thread entirely. We achieve this using:

1. 2.
   AudioWorklet: Running a highly optimized rendering loop in a separate, real-time operating system thread.
2. 4.
   SharedArrayBuffer: Sharing raw, contiguous float memory directly between the main thread and the AudioWorklet thread without serialization or copy overhead.
3. 6.
   Atomic Locks (Atomics API): Coordinating read/write cursors between the threads with lock-free, microsecond-level synchronization.

In this guide, we'll design and build a high-performance, browser-based Multitrack Audio Mixer.

⚡ 1. The Real-Time DAW Architecture

To maintain glitch-free playback, the main JavaScript thread must handle heavy tasks (like downloading MP3 files and displaying waves) while the AudioWorklet thread strictly pulls mixed audio samples from shared memory.

We establish a Ring Buffer (Circular Queue) in a SharedArrayBuffer.

• The Main Thread (Writer): Downloads, decodes audio files, and writes the raw float channels into the SharedArrayBuffer.
• The AudioWorklet Thread (Reader): Continuously reads the mixed audio samples, runs active effects (like Reverb or EQ), and outputs them to the user's speakers every 2.6 milliseconds (128 samples).

[Main Thread (Decodes Audio)] ──(Writes Float Data)──> [SharedArrayBuffer (Ring Buffer)]
                                                                    │
[Zero-Latency Speaker Output] <──(Real-time Effects)── [AudioWorklet (Reads Data)]

🏗️ 2. The Lock-Free Shared Ring Buffer (ring-buffer.js)

Using standard JavaScript objects across threads is impossible. Instead, we instantiate a SharedArrayBuffer representing a contiguous byte array.

Let's define a lock-free Ring Buffer that coordinates read and write indexes using the browser-native Atomics API to guarantee thread safety.

javascript
export class SharedRingBuffer {
  constructor(sharedBuffer) {
    this.buffer = sharedBuffer;
    this.capacity = (sharedBuffer.byteLength - 8) / 4; // Reserve first 8 bytes for cursors
    
    // Cursors are stored as 32-bit Integers at the start of the buffer
    this.writeCursor = new Int32Array(sharedBuffer, 0, 1);
    this.readCursor = new Int32Array(sharedBuffer, 4, 1);
    
    // The raw float audio data array
    this.data = new Float32Array(sharedBuffer, 8, this.capacity);
  }

  write(floatArray) {
    const r = Atomics.load(this.readCursor, 0);
    const w = Atomics.load(this.writeCursor, 0);
    
    // Calculate available write space
    const available = this.capacity - (w - r);
    if (available < floatArray.length) {
      return false; // Buffer overflow!
    }

    for (let i = 0; i < floatArray.length; i++) {
      const idx = (w + i) % this.capacity;
      this.data[idx] = floatArray[i];
    }

    // Atomic increment of the write cursor
    Atomics.add(this.writeCursor, 0, floatArray.length);
    return true;
  }

  read(outBuffer) {
    const r = Atomics.load(this.readCursor, 0);
    const w = Atomics.load(this.writeCursor, 0);

    // Check if there are enough samples available to fill the request
    if (w - r < outBuffer.length) {
      return false; // Buffer underrun! (Pops and clicks will occur)
    }

    for (let i = 0; i < outBuffer.length; i++) {
      const idx = (r + i) % this.capacity;
      outBuffer[i] = this.data[idx];
      this.data[idx] = 0.0; // Clear read memory
    }

    // Atomic increment of the read cursor
    Atomics.add(this.readCursor, 0, outBuffer.length);
    return true;
  }
}

💻 3. Coding the AudioWorklet Mixer (mixer-processor.js)

Now, let's write our real-time mixer that runs inside the AudioWorklet. It reads samples from our Shared Ring Buffer and plays them back.

javascript
import { SharedRingBuffer } from './ring-buffer.js';

class MixerProcessor extends AudioWorkletProcessor {
  constructor(options) {
    super();
    // Retrieve SharedArrayBuffer passed during initialization
    const sharedBuffer = options.processorOptions.sab;
    this.ringBuffer = new SharedRingBuffer(sharedBuffer);
  }

  process(inputs, outputs, parameters) {
    const output = outputs[0];
    const channelLeft = output[0];
    const channelRight = output[1];

    // V8 asks for 128 samples of audio at a time (2.6ms chunks)
    const samplesToRender = new Float32Array(128);

    // Read from the Shared Array Buffer
    const success = this.ringBuffer.read(samplesToRender);

    if (success) {
      // Map mono samples across stereo speakers
      for (let i = 0; i < 128; i++) {
        channelLeft[i] = samplesToRender[i];
        channelRight[i] = samplesToRender[i];
      }
    } else {
      // Fallback to silence during buffer underrun to prevent loud white noise
      channelLeft.fill(0.0);
      channelRight.fill(0.0);
    }

    return true;
  }
}

registerProcessor('mixer-processor', MixerProcessor);

🚀 4. Bootstrapping the DAW in JavaScript

Here is how we glue the system together on the main UI thread:

javascript
async function initDAWMixer(audioFileUrl) {
  // 1. Set up 1MB SharedArrayBuffer (262,144 Float32 samples ~ 6 seconds of buffer cache)
  const sab = new SharedArrayBuffer(1024 * 1024 + 8);
  const ringBuffer = new SharedRingBuffer(sab);

  // 2. Initialize Web Audio context
  const audioContext = new AudioContext();
  await audioContext.audioWorklet.addModule('ring-buffer.js');
  await audioContext.audioWorklet.addModule('mixer-processor.js');

  // 3. Create AudioWorklet Node, passing SharedArrayBuffer to the processor thread
  const mixerNode = new AudioWorkletNode(audioContext, 'mixer-processor', {
    processorOptions: { sab: sab }
  });
  mixerNode.connect(audioContext.destination);

  // 4. Download and Decode Audio File on the background
  const response = await fetch(audioFileUrl);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  
  // Extract mono channel data
  const rawChannelData = audioBuffer.getChannelData(0);

  // 5. Stream the decoded file into the Shared Ring Buffer in 1024-sample increments
  let offset = 0;
  function streamChunks() {
    while (offset < rawChannelData.length) {
      const chunk = rawChannelData.subarray(offset, offset + 1024);
      const success = ringBuffer.write(chunk);
      
      if (!success) {
        // Buffer is temporarily full; check back in 50ms
        setTimeout(streamChunks, 50);
        break;
      }
      offset += chunk.length;
    }
  }
  streamChunks();
}

🏁 5. Conclusion

By separating dynamic decoding and UI rendering onto the main thread while leaving raw sample playing to an AudioWorklet synchronized via SharedArrayBuffer, you construct a professional, studio-grade digital audio workstation. It delivers ultra-low latency, zero sample drops, and buttery-smooth multitrack mixes directly in the user's web browser.