Learn Loading a RNBO Device in the Browser

Getting Started

Welcome to RNBO

Quickstart

RNBO Basics

Key Differences

Why We Made RNBO

Coding Resources

Fundamentals

Audio IO

Messages to rnbo~

Using Parameters

MIDI in RNBO

Messages and Ports

Polyphony and Voice Control

Audio Files in RNBO

Using Buffers

Using the FFT

Export Targets

Export Targets Overview

VST/AudioUnit
Max External Target
Raspberry Pi Target
The Web Export Target
The C++ Source Code Target

Code Export

Working with JavaScript
Working with C++

Special Topics

Sample Accurate Patching
Scala and Custom Tuning

RNBO and Max for Live

RNBO Raspberry Pi OSCQuery Runner

Metadata

Export Description

Raspberry Pi GPIO

Updating the RNBO Package

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.

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();