Loading a RNBO Device in the Browser

Now that we know how to create an AudioContext, we're ready to go about creating a RNBO device. As a prerequisite, we should make sure that the page we want to run RNBO in is being served, and not simply loaded from a file:// URL. In other words, if you just double-click a .html file to open it in the browser, your RNBO device will fail to load (see https://github.com/Cycling74/rnbo.example.webpage for more information). For security reasons, the browser will not enable WebAssembly or AudioWorklets for any page loaded with a file:// URL scheme. Without these two browser technologies, RNBO can't load.

If you're looking for a simple way to start an HTTP server on your machine, and you have Node installed, you can launch a static HTTP server from the command line by running npx http-server.

Assuming you've exported your patcher to a file patcher.export.json, you can use fetch to get the contents of the file. Then, parse the raw contents as JSON and pass the result to RNBO.createDevice. Note that this relies on asynchronous JavaScript functions, so we have to be careful to await these asynchronous functions.

// Get createDevice from the rnbo.js library
const { createDevice } = require("@rnbo/js");

// Create AudioContext
let WAContext = window.AudioContext || window.webkitAudioContext;
let context = new WAContext();

const setup = async () => {
    let rawPatcher = await fetch("patcher.export.json");
    let patcher = await rawPatcher.json();

    let device = await createDevice({ context, patcher });

    // This connects the device to audio output, but you may still need to call context.resume()
    // from a user-initiated function.
    device.node.connect(context.destination);
};

// We can't await an asynchronous function at the top level, so we create an asynchronous
// function setup, and then call it without waiting for the result.
setup();