Development guide: Mixing signals

We'll be writing the guides in vanilla Javascript (no framework), which should be the easiest way to understand what is going on.

An important thing to consider where the mixing of the signals will take place. Remember that Superpowered sits on top of the Web Audio API's AudioContext and runs within an instance (or multiple) of AudioWorkletProcessorNodes. The AudioWorklet processor has a single stereo input and a single stereo output. Mixing takes place within the AudioWorklet, not by varying the volume of the AudioWorkletProcessorNode that the processor is hooked into with the Web Audio API. The worklet will handle the generation of the signals and the summing.

We should keep all audio related code and manipulation within Superpowered's control and within it's ecosystem, that way the code is transferable between platforms, provides identical audio across web browsers and has the highest audio processing performance.

Within our existing processor script, first modify the onReady function like this:

...

onReady() {
  // Create the Generators and a MonoMixer to sum signals.
  this.generator1 = new this.Superpowered.Generator(
    this.samplerate,
    this.Superpowered.Generator.Sine
  );
  this.generator2 = new this.Superpowered.Generator(
    this.samplerate,
    this.Superpowered.Generator.Sine
  );
  this.mixer = new this.Superpowered.MonoMixer();

  // Pre-allocate some buffers for processing inside processAudio.
  // Allocating 1024 floats is safe, the buffer size is only 128 in most cases.
  this.gen1OutputBuffer = new this.Superpowered.Float32Buffer(1024);
  this.gen2OutputBuffer = new this.Superpowered.Float32Buffer(1024);
  this.monoMixerOutputBuffer = new this.Superpowered.Float32Buffer(1024);

  // Fixed gain values for the mixer channels.
  this.mixer.inputGain[0] = 0.5;
  this.mixer.inputGain[1] = 0.5;

  // Fixed frequencies for the two generators.
  this.generator1.frequency = 440;
  this.generator2.frequency = 660;

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

...

Note the creation of this.gen1OutputBuffer and this.gen2OutputBuffer, these are initially empty buffers which we will use to store the full volume raw output of the generators.

The instance of the MonoMixer was created in the onReady block above. Next we turn our attention to the processAudio() method. Call the generate methods of both Superpowered Generators instances, then sum the two signals together with the Superpowered MonoMixer.

...

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

  // Generate the first signal.
  this.generator1.generate(
    this.gen1OutputBuffer.pointer,
    buffersize
  );

  // Generate the second signal.
  this.generator2.generate(
    this.gen2OutputBuffer.pointer,
    buffersize
  );

  // Mix the two tones into another buffer.
  this.mixer.process(
    this.gen1OutputBuffer.pointer, // input 1
    this.gen2OutputBuffer.pointer, // input 2
    0,                             // input 3 (empty)
    0,                             // input 4 (empty)
    this.monoMixerOutputBuffer.pointer, // output
    buffersize
  );

  // Copy the mono buffer into the interleaved stereo output.
  this.Superpowered.Interleave(
    this.monoMixerOutputBuffer.pointer, // left side
    this.monoMixerOutputBuffer.pointer, // right side
    outputBuffer.pointer,
    buffersize
  );
}

...

Cleaning up

Lastly, we must remember to clear up the memory allocations of any class instances we have created by modifying the onDestruct() method of the AudioWorkletProcessor script:

// onDestruct is called when the parent AudioWorkletNode.destruct() method is called.
// You should clear up all Superpowered objects and allocated buffers here.
onDestruct() {
  this.generator1.destruct();
  this.generator2.destruct();
  this.mixer.destruct();
  this.gen1OutputBuffer.free();
  this.gen2OutputBuffer.free();
  this.monoMixerOutputBuffer.free();
}

Below is a Javascript sandbox example of the guide above for you to play experiment with. We've added a little UI (buttons, logos etc) to the code but the audio code is as described above. On most devices, a browser's AudioContext will be created in a suspended state and must but resumed with a user interaction, this is why we have included some minimal UI.

You should now hear the two sine tones when you hit the start button.