Learn Loading a RNBO Device in the Browser

Getting Started

Welcome to RNBO


RNBO Basics

Key Differences

Why We Made RNBO


Audio IO

Messages to rnbo~

Using Parameters


Messages and Ports

Polyphony and Voice Control

Audio Files in RNBO

Using Buffers

Using the FFT

Export Targets

Export Targets Overview

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

Code Export

Working with JavaScript
Working with C++

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.

// 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.