This Web Assembly Ring Buffer can handles an input buffer from specific size and give you an output buffer with any sizes that you want

Features

• Manipulate Input and Output PCM Data
• Dynamic buffer sizes
• Wasm Ring Buffer Queue implemented in C++
• High processment

Install

npm install wasm-ring-buffer

Usage

import WasmRingBuffer from 'wasm-ring-buffer';

How does it work?

The current AudioWorkletProccess only process 128 bytes for each; so if you need a buffer with your own size, you need to use a "Ring Buffer" to manipulate it. So this library does it for you. We enqueue the AudioWorkletProccess buffer into a Circular Linked List(FIFO), and dequeue with your own size.

Requeriments

For browser definitions a WebAssembly implementation can not run in the Main Thread, you can use only inside of WebWorkers or AudioWorkletNode

Scaffold

- wasm-ring-buffer
  - example
    - using-react
  - src
     node.h
     queue.h
     ring-buffer.wasmmodule.js
     ring-buffer.wasmmodule.wasm
     wasm-ring-buffer.cpp
  index.js
  index.d.ts

Example

AudioContext + AudioWorklet

const inputAudioContext = new AudioContext({ sampleRate: 8000 });
      inputAudioContext.audioWorklet
      .addModule('your-worklet-processor.js')
      .then(() => {
        navigator.mediaDevices
          .getUserMedia({ audio: true })
          .then(stream => {
            const microphone = inputAudioContext.createMediaStreamSource(stream);
            const audioWorkletNode = new AudioWorkletNode(
              inputAudioContext,
              'your-worklet-processor',
              {
                channelCount : 1,
                processorOptions: { //Passing the arguments to processor
                  bufferSize: 160, //output buffer size
                  capacity:2046 // max fifo capacity
                },
              },
            );
            audioWorkletNode.port.onmessage = ({ data }) => {
                console.log('Your own buffer >> ', data); //Receiving data from worklet thread
            };
            microphone.connect(audioWorkletNode).connect(inputAudioContext.destination);
          });
      });

your-worklet-processor.js

import WasmRingBuffer from 'wasm-ring-buffer/index.js';
import { LOG_TABLE } from './constants.js';


class YourWorkletProcessor extends AudioWorkletProcessor {
  constructor(options) {
    super();
    this._bufferSize = options.processorOptions.bufferSize;
    this._capacity = options.processorOptions.capacity;
    this._ringBuffer = new WasmRingBuffer(this._capacity, this._bufferSize);
  }

  float32ToInt16(float32array) {
    let l = float32array.length;
    const buffer = new Int16Array(l);
    while (l--) {
      buffer[l] = Math.min(1, float32array[l]) * 0x7fff;
    }
    return buffer;
  }

  alawEncode(sample) {
    let compandedValue;
    sample = sample === -32768 ? -32767 : sample;
    const sign = (~sample >> 8) & 0x80;
    if (!sign) {
      sample *= -1;
    }
    if (sample > 32635) {
      sample = 32635;
    }
    if (sample >= 256) {
      const exponent = LOG_TABLE[(sample >> 8) & 0x7f];
      const mantissa = (sample >> (exponent + 3)) & 0x0f;
      compandedValue = (exponent << 4) | mantissa;
    } else {
      compandedValue = sample >> 4;
    }
    return compandedValue ^ (sign ^ 0x55);
  }

  linearToAlaw(int16array) {
    const aLawSamples = new Uint8Array(int16array.length);
    for (let i = 0; i < int16array.length; i++) {
      aLawSamples[i] = this.alawEncode(int16array[i]);
    }
    return aLawSamples;
  }

  process(inputs) {
    const input = inputs[0]; // channel 1
    const output = new Float32Array(this._bufferSize);
    this._ringBuffer.enqueue(input[0]); //storing

    while (this._ringBuffer.size() >= this._bufferSize) {
      this._ringBuffer.dequeue(output); //retrieving 
      const int16array = this.float32ToInt16(output); 
      const payload = this.linearToAlaw(int16array); 
      const sharedPayload = new Uint8Array(new SharedArrayBuffer(payload.length)); // sharing buffer memory
      sharedPayload.set(payload, 0);
      this.port.postMessage(sharedPayload); //Sending data to main thread
    }

    return true;
  }
}

registerProcessor(`your-worklet-processor`, YourWorkletProcessor);

Full code is avalaible in project-folder > example > using-react