Learn Getting the RNBO.js library

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

Getting the RNBO.js library

How to include the rnbo.js library in your JavaScript or TypeScript project.

In order to use an exported RNBO patcher in a web page, you'll need to include the rnbo.js adapter library. This library wraps the exported code itself, providing an API that facilitates integration with WebAudio.

Loading via our CDN

There are two ways to include the rnbo.js library. First, you can simply load the library from our public CDN (Content delivery network).

<!-- Add this somewhere in your header. -->
<script type="text/javascript" src="https://cdn.cycling74.com/rnbo/latest/rnbo.min.js"></script>

If you add RNBO to your page this way, the library will add a global RNBO object to your window. You can call into the library using this global object.

const device = await RNBO.createDevice({ audioContext, patcher });

npm install

If you're working with RNBO in a npm package, you can also install @rnbo/js using npm.

npm install @rnbo/js

And then include the library in your code, for example with the require() or import syntax.

import { createDevice } from "@rnbo/js";

You can also use @rnbo/js in TypeScript projects. For more details see Working with TypeScript.

const { createDevice } = require("@rnbo/js");
//...
const device = await createDevice({ audioContext, patcher });

Note: For consistency, code examples in this documentation will use this second strategy, and will not call into the adapter library using the global RNBO object. However, it's generally very easy to convert from using require or import to the CDN-style include.

// This require style syntax...
const { createDevice } = require("@rnbo.js");

// ...can easily be converted to work with a CDN link, assuming a global RNBO object
const { createDevice } = RNBO;

// In both cases, the createDevice function can now be used without the RNBO prefix

RNBO.js Version

If you try to use a version of the library that doesn't match the version of RNBO that you exported with, you'll see an error appear in the developer console of your browser.

Screen Shot 2022-07-13 at 5.35.43 PM.png

As the error suggests, it's not necessarily a fatal error, but a version mismatch could cause problems.