The Web Export Target

Intro To Web Audio Export

One of RNBO's most versitile targets is the Web Audio Export, which can export your RNBO patch into a form that can be usable on the web. More specifically, Web Audio Export utilizes a remote cloud compiler to compile your RNBO patch to the Web Assembly (WASM) format, which allows for high-quality audio in the browser using JavaScript.

Additionally, each RNBO device is turned into an Audio Worklet Node—a component of the Web Audio API which provides functionality for using multiple RNBO devices in a single website. This is useful for chaining and mixing multiple RNBO devices together in the same web project.

RNBO In The Browser

RNBO Web Export generates a single .json file that contains everything you need to run your patch in the browser. In order interact with your RNBO patch in the browser using this file, it must be placed within the context of some code that you must also provide. This code must include the @rnbo/js library, which will be used to wrap the logic of your RNBO patch from the exported .json file into a web audio node.

The way in which @rnbo/js and your exported JSON file are integrated into web code is entirely up to you. In other words, it is entirely up to the user to create an interface for interacting with the exported RNBO patch in question.

Web Export — Quickstart

Luckily, we’ve included a helpful starting place for simply getting up and running with using a RNBO patch in the browser. If your goal is simply to use your patch in the browser while dealing with as little web development as possible, the RNBO Webpage Template might be a helpful place to start. This template can load and run your exported patches without needing any additional code. You can use it to check that your export is working, and it can also be the starting point for a new project

A RNBO patch compiled using the RNBO Webpage Export template

The template uses a CDN to fetch the RNBO library, but the recommended way to include RNBO in your project is by using the npm package. The Working With JavaScript series will take you through the particulars of using RNBO in a web app. This covers everything from installing the @rnbo/js npm package to integrating buffers, MIDI routing, multiple RNBO devices, and even working with TypeScript.

The demos available on learningsynths.ableton.com are all made using web exported RNBO patches!

Alongside these guides, a more formal API for the @rnbo/js package is available on the JavaScript API Reference page.

Sharing Your Web RNBO Patches

Once you’ve created a working site that uses RNBO, the question becomes how you might host your new project. Hosting your project means making it available to people on other machines. Broadly speaking, you can either host your project locally or use a hosting provider.

Local Hosting: If the website in question only needs to be accessed by a few people in the same location—say for a sound installation, or an interactive performance—then hosting your site locally might be the best option. This approach would be akin to serving the site exactly as is, by using node either on your laptop or on another computer. The machine running node would act as your main server.

Assuming that the server is running, every device on the same wifi network as the server would have access to the site by going to the served URL specified on the server (e.g. https://127.0.0.1:8000).

Internet Hosting: If the intent behind your project is to instead have your RNBO site accessable on the internet, then a remote server might be the best option. There are a number of organizations with both free and paid options for hosting websites. Popular options include Netlify and Digital Ocean. Static hosting is also an option by using something like GitHub Pages.