Tech 🖥 : Max/MSP RNBO

Posted: March 19, 2023

Have you ever struggled with implementing complex sound/music systems in your application?

This might be helping to solve the problem.

At first, I mainly followed the RNBO GitHub tutorial.

If you would like to test quickly, simply you only need to follow this instruction.

Make/Open the sample max patch and export RNBO patch for usage in a web browser

When you opened the auto-granulator-start.maxpat You will see the sample patch below.

An image from Notion

To set up the configuration, you need to open RNBO patch by clicking rnbo~ object.

Basic Tutorial: Custom parameter

In addition to the official repo, I will explain how to connect your parameter to RNBO. I tested simple lowpass effect.

Here is my tutorial code mainly forked official repo.

If you are interested in multiple audio control, please check multi-faderfolder.

Other possible changes (optional)

In order to receive audio input, Make a web audio node for the audio element.

You can check how to add audio input here as well.

Add the inputNode

//----- BEFORE
// Connect the device to the web audio graph

//----- AFTER
const inputNode = new MediaElementAudioSourceNode(context, {
    mediaElement: document.getElementById("radio"),
    channelCount: 1

analyzerNodeLeft = new AnalyserNode(context, {
    fftSize: 1024
analyzerNodeRight = new AnalyserNode(context, {
      fftSize: 1024
dataArrayLeft = new Float32Array(1024);
dataArrayRight = new Float32Array(1024);

const splitter = context.createChannelSplitter(3);

  // Connect the device to the web audio graph
splitter.connect(outputNode, 0, 0);
splitter.connect(analyzerNodeLeft, 1, 0);
splitter.connect(analyzerNodeRight, 2, 0);

These are also the things I changed from the example code.

Removed the loading dependencies because I didn’t use any dependencies.

// (Optional) Fetch the dependencies
  let dependencies = [];
  try {
      const dependenciesResponse = await fetch("export/dependencies.json");
      dependencies = await dependenciesResponse.json();

      // Prepend "export" to any file dependenciies
      dependencies = => d.file ? Object.assign({}, d, { file: "export/" + d.file }) : d);
  } catch (e) {}

// (Optional) Load the samples
  if (dependencies.length)
      await device.loadDataBufferDependencies(dependencies);


RNBO JavaScript API Reference

Multiple RNBO Devices

Making Custom Patch(Future work)

To test my own custom patch, I’m gonna make a simple wavetable synth in Max/MSP.