Fundamentals
Export Targets
Code Export
Patcher UI
Special Topics
RNBO Raspberry Pi OSCQuery Runner
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.
As the error suggests, it's not necessarily a fatal error, but a version mismatch could cause problems.