Development guide: Applying effects

Remember, we converted our input signal to stereo via the WebAudio API before we passed it to the AudioWorkletProcessor. The Reverb and Filter FX classes expect interleaved stereo input pointers.

First, create a new Superpowered Reverb and Filter in you processor's onReady method. Set the desired default properties here too.

// your audio processor file

onReady() {
  this.reverb = new this.Superpowered.Reverb(
    this.samplerate,
    this.samplerate
  );
  this.reverb.enabled = true;
  this.reverb.mix = 0.5;

  this.filter = new this.Superpowered.Filter(
    this.Superpowered.Filter.Resonant_Lowpass,
    this.samplerate
  );
  this.filter.resonance = 0.2;
  this.filter.frequency = 2000;
  this.filter.enabled = true;

  this.inputGain = 0.2;
  this.previousInputGain = 0;

  // Notify the main scope that we're prepared.
  this.sendMessageToMainScope({ event: "ready" });
}

We'll receive parameter changes for both our reverb and filter from the main scope, and should update our onMessageFromMainScope to include both of these new parameter changes. Trigger the param change in the same way as the existing inputGain slider.

We'll need to add some controls to the DOM that send the parameter changes to the main scope, which then forward those changes to the audio scope.

<!-- In our application's main HTML file, add the following -->
...
    <button id="startButton" onclick="boot()">
        Start
    </button>

    <div id="bootedControls">
      <label>Input gain<span id="inpuGain">0.2</span></label>
        <input
        type="range"
        min="0"
        max="1"
        step="0.01"
        value="0.2"
        oninput="onParamChange('inputGain', this.value)"
        />
        <label>Reverb Size <span id="reverbSize">0.7</span></label>
        <input
        type="range"
        min="0"
        max="1"
        step="0.01"
        value="0.7"
        oninput="onParamChange('reverbSize', this.value)"
        />
        <label>Filter Freq <span id="filterFrequency">4000</span> Hz</label>
        <input
        type="range"
        min="20"
        max="10000"
        step="0.1"
        value="4000"
        oninput="onParamChange('filterFrequency', this.value)"
        />
    </div>
...

onParamChange in the main scope should forward the control messages to the processorNode:

...
onParamChange = (id, value) => {
    // here we update the text label in the dom with the value.
    document.getElementById(id).innerHTML = value;

    // Here we send the new paramter change over to the audio thread to be applied, passing in the id and value to be parsed.
    this.processorNode.sendMessageToAudioScope({
      type: "parameterChange",
      payload: {
        id,
        value: Number(value) // we should type cast here.
      }
    });
  };
...

Then within our processor script, we need to respond to the incoming changes.

// Messages are received from the main scope through this method.
onMessageFromMainScope(message) {
  if (message.type === "parameterChange") {
    if (message.payload?.id === "inputGain") this.inputGain = message.payload.value;
    else if (message.payload?.id === "reverbMix") this.reverb.mix = message.payload.value;
    else if (message.payload?.id === "filterFrequency") this.filter.frequency = message.payload.value;
  }
}

In our processAudio method in the AudioWorkletProcessor script:

...

processAudio(inputBuffer, outputBuffer, buffersize, parameters) {
  // Ensure the samplerate is in sync on every audio processing callback.
  this.filter.samplerate = this.samplerate;
  this.reverb.samplerate = this.samplerate;

  // Apply volume while copy the input buffer to the output buffer.
  // Gain is smoothed, starting from "previousInputGain" to "inputGain".
  this.Superpowered.Volume(
    inputBuffer.pointer,
    outputBuffer.pointer,
    this.previousInputGain,
    this.inputGain,
    buffersize
  );
  this.previousInputGain = this.inputGain; // Save the gain for the next round.

  // Apply reverb to output (in-place).
  this.reverb.process(outputBuffer.pointer, outputBuffer.pointer, buffersize);

  // Apply the filter (in-place).
  this.filter.process(outputBuffer.pointer, outputBuffer.pointer, buffersize);
}

Cleaning up

Remember that we must also clear our class instances in the onDestruct method of our AudioWorkletProcessor.

...

// onDestruct is called when the parent AudioWorkletNode.destruct() method is called.
// You should clear up all Superpowered objects and allocated buffers here.
onDestruct() {
  this.reverb.destruct();
  this.filter.destruct();
}


...