Ported recorder to use a transferable ArrayBuffer pool, removed coi-serviceworker.js and SharedArrayBuffer stuff

andersnm · andersnm · commit 2d5080805dd5 · 2025-08-31T18:06:52.000+02:00
diff --git a/README.md b/README.md
@@ -11,4 +11,3 @@ Try it here: https://andersnm.github.io/modulyzer/
 - DX7 patches: https://yamahablackboxes.com/collection/yamaha-dx7-synthesizer/patches/
 - Drumkits: https://filedn.com/lovhTbsn9Pz4AJR3FQeqxCF/Buzz/drumkits/ (for [Drumkit Manager 3](https://dkm3.sourceforge.net/))
 - Icons: https://hugeicons.com/
-- `SharedArrayBuffer` on localhost and GitHub Pages: https://github.com/gzuidhof/coi-serviceworker
diff --git a/index.html b/index.html
@@ -1,7 +1,6 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <script src="coi-serviceworker.js"></script>
     <script>
     </script>
     <meta charset="UTF-8" />
diff --git a/public/coi-serviceworker.js b/public/coi-serviceworker.js
diff --git a/src/audio/Recorder.ts b/src/audio/Recorder.ts
@@ -1,72 +1,43 @@
-export interface RecorderBuffer {
-    buffer: Float32Array;
-    bufferPosition: number;
-}
+/*
+v1. allocated Float32Array all the time
+v2. used SharedArrayBuffer, deep rabbithole of cross-origin-isolation
+v3. uses transferable ArrayBuffer pool
+*/
 
-const bufferSize = 8192 * 4; // size of the shared ringbuffer
-const outputSize = bufferSize / 4; // return quarter chunks of the ringbuffer as they're ready
+const bufferSize = 8192 * 4; // number of samples per buffer in the pool - must be multiple of 128
 
 export class Recorder extends EventTarget {
     context: AudioContext;
     recordNode: AudioWorkletNode;
-    sharedState: SharedArrayBuffer;
-    sharedBuffers: SharedArrayBuffer[];
     buffers: Float32Array[];
-    state: Int32Array;
-    pollingInterval: number;
-    lastReadPosition: number = 0;
-    outBuffers: Float32Array[];
 
     constructor(context: AudioContext) {
         super();
         this.context = context;
 
-        this.sharedState = new SharedArrayBuffer(16); // write, 3 reserved * sizeof(int32)
-        this.sharedBuffers = [
-            new SharedArrayBuffer(bufferSize * 4), // * sizeof(float)
-            new SharedArrayBuffer(bufferSize * 4)
-        ];
-
-        this.state = new Int32Array(this.sharedState);
-        this.buffers = [
-            new Float32Array(this.sharedBuffers[0]),
-            new Float32Array(this.sharedBuffers[1]),
-        ];
-
-        this.outBuffers = [
-            new Float32Array(outputSize),
-            new Float32Array(outputSize)
-        ];
+        const bufferPool: ArrayBuffer[] = [];
+        for (let i = 0; i < 16; i++) {
+            bufferPool.push(new ArrayBuffer(bufferSize * Float32Array.BYTES_PER_ELEMENT));
+        }
 
         this.recordNode = new AudioWorkletNode(this.context, "record-processor");
-        this.recordNode.port.postMessage({ type: "init", buffers: this.sharedBuffers, state: this.sharedState });
+        this.recordNode.port.addEventListener("message", this.onMessage);
         this.recordNode.connect(context.destination);
 
-        // TODO: compute a poll interval such that a quarter of the ringbuffer is always ready
-        this.pollingInterval = window.setInterval(this.onPoll, 90);
+        this.recordNode.port.start();
+        this.recordNode.port.postMessage({ type: "init", buffers: bufferPool });
     }
 
-    onPoll = () => {
-        const writePosition = Atomics.load(this.state, 0);
-        const available = (writePosition >= this.lastReadPosition)
-            ? writePosition - this.lastReadPosition
-            : bufferSize - this.lastReadPosition + writePosition;
-
-        if (available < outputSize) return; // wait until enough data
-
-        const left = this.buffers[0].subarray(this.lastReadPosition, this.lastReadPosition + outputSize);
-        const right = this.buffers[1].subarray(this.lastReadPosition, this.lastReadPosition + outputSize);
-
-        this.lastReadPosition += outputSize;
-
-        this.dispatchEvent(new CustomEvent("input", {
-            detail: [left, right]
-        }));
-    }
+    onMessage = (ev: MessageEvent<{type, buffers}>) => {
+        if (ev.data.type === "input") {
+            const left = new Float32Array(ev.data.buffers[0]);
+            const right = new Float32Array(ev.data.buffers[1]);
+            this.dispatchEvent(new CustomEvent("input", { detail: [ left, right ] }));
+            this.recordNode.port.postMessage({ type: "recycle", buffers: ev.data.buffers }, ev.data.buffers);
+        }
+    };
 
     destroy() {
         this.recordNode.port.postMessage({ type: "quit" });
-        clearInterval(this.pollingInterval);
-        this.pollingInterval = undefined;
     }
 }
diff --git a/src/audio/RecorderWorklet.ts b/src/audio/RecorderWorklet.ts
@@ -1,7 +1,10 @@
 class RecordProcessor extends AudioWorkletProcessor {
   quit: boolean = false;
+  arrayBufferPool: ArrayBuffer[] = [];
+
   buffers: Float32Array[];
-  state: Int32Array;
+  arrayBuffers: ArrayBuffer[];
+  writePosition: number = 0;
 
   constructor() {
     super();
@@ -10,13 +13,27 @@ class RecordProcessor extends AudioWorkletProcessor {
     this.port.start();
   }
 
-  onMessage = (ev: MessageEvent<any>) => {
+  allocateBuffers(bufferCount: number = 2) {
+    if (this.arrayBufferPool.length < bufferCount) {
+      throw new Error("Out of buffers in pool");
+    }
+
+    return this.arrayBufferPool.splice(0, bufferCount);
+  }
+
+  postBuffers() {
+    this.port.postMessage({ type: "input", buffers: this.arrayBuffers }, this.arrayBuffers); 
+    this.arrayBuffers = this.allocateBuffers(2); 
+    this.buffers = [ new Float32Array(this.arrayBuffers[0]), new Float32Array(this.arrayBuffers[1]) ];
+  }
+
+  onMessage = (ev: MessageEvent<{type, buffers}>) => {
     if (ev.data.type === "init") {
-      this.buffers = [
-        new Float32Array(ev.data.buffers[0]),
-        new Float32Array(ev.data.buffers[1]),
-      ];
-      this.state = new Int32Array(ev.data.state);
+      this.arrayBufferPool = ev.data.buffers;
+      this.arrayBuffers = this.allocateBuffers(2); 
+      this.buffers = [ new Float32Array(this.arrayBuffers[0]), new Float32Array(this.arrayBuffers[1]) ];
+    } else if (ev.data.type === "recycle") {
+      this.arrayBufferPool.push(...ev.data.buffers);
     } else if (ev.data.type === "quit") {
       this.quit = true;
     } else {
@@ -29,36 +46,31 @@ class RecordProcessor extends AudioWorkletProcessor {
       return false;
     }
 
-    if (!this.buffers || !this.state) {
+    if (!this.buffers) {
       return true;
     }
 
     if (!inputs.length) {
       return true;
     }
 
-    let writePosition = Atomics.load(this.state, 0);
-
     // Send all channels from the first input, assume only a microphone stream is connected
     const inputBuffers = inputs[0];
     const inputBufferSize = inputBuffers[0].length;
     const recordBufferSize = this.buffers[0].length;
 
-    if (writePosition + inputBufferSize <= recordBufferSize) {
-      this.buffers[0].set(inputBuffers[0], writePosition);
-      this.buffers[1].set(inputBuffers[1], writePosition);
-    } else {
-      // wrap
-      const chunkSize = recordBufferSize - writePosition;
-      this.buffers[0].set(inputBuffers[0].subarray(0, chunkSize), writePosition);
-      this.buffers[1].set(inputBuffers[1].subarray(0, chunkSize), writePosition);
+    if (this.writePosition + inputBufferSize > recordBufferSize) {
+      throw new Error("Input buffer too large for record buffer - should never happen");
+    }
+
+    this.buffers[0].set(inputBuffers[0], this.writePosition);
+    this.buffers[1].set(inputBuffers[1], this.writePosition);
 
-      this.buffers[0].set(inputBuffers[0].subarray(chunkSize, inputBufferSize), 0);
-      this.buffers[1].set(inputBuffers[1].subarray(chunkSize, inputBufferSize), 0);
+    if (this.writePosition + inputBufferSize === recordBufferSize) {
+      this.postBuffers();
     }
 
-    writePosition = (writePosition + inputBufferSize) % recordBufferSize;
-    Atomics.store(this.state, 0, writePosition);
+    this.writePosition = (this.writePosition + inputBufferSize) % recordBufferSize;
 
     return true;
   }
