Tech 🖥 : Max/MSP RNBO

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.

GitHub - Cycling74/rnbo.example.webpage: Running a RNBO patch in the browser, using a local static web server

This example shows you how to add dynamic audio to a webpage, using the JavaScript source code export feature of RNBO, part of Max 8 made by Cycling '74. This repository uses Node to launch a simple web server to make your webpage available locally.

https://github.com/Cycling74/rnbo.example.webpage

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.

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

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.

GitHub - junichishmz/rnbo.example.webpage

Contribute to junichishmz/rnbo.example.webpage development by creating an account on GitHub.

https://github.com/junichishmz/rnbo.example.webpage

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

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.

GitHub - Cycling74/rnbo-adc-workshop: How to use RNBO-A workshop for ADC 2022

How to use RNBO-A workshop for ADC 2022 How to get RNBO -- You've already got RNBO, it's installed in Max 8 -- (Maybe) you can have a short term license for the workshop RNBO Basics -- Creating a rnbo~ object -- Getting sound in and out of RNBO -- Using param to create something that you can modulate from the outside -- Export this to a VST or something (might take a minute) C++ Export, making a command line tool.

https://github.com/Cycling74/rnbo-adc-workshop

Add the inputNode

//----- BEFORE
// Connect the device to the web audio graph
device.node.connect(outputNode);

//----- 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
inputNode.connect(device.node);
device.node.connect(splitter);
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 = dependencies.map(d => 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

RNBO JavaScript API Reference

The @rnbo/js package is the main package for running RNBO Patchers within the Browser. Using the main entry point createDevice(), RNBO Devices can be created from RNBO Patchers and integrated into the WebAudio graph of your application. For more examples of how to utilize the JavaScript API, check out our Working with JavaScript Learn articles.

https://rnbo.cycling74.com/js

Multiple RNBO Devices

Working with Multiple RNBO Devices

The WebAudio API is designed around the concept of audio processing nodes. Each of these nodes can have zero or more audio inputs, as well as zero or more audio outputs. When we create a RNBO device, we also create a WebAudio node that wraps the exported RNBO code.

https://rnbo.cycling74.com/learn/working-with-multiple-rnbo-devices-js

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

Reference