├── export
    └── README.md
├── img
    ├── js-export-location.png
    ├── use-this-template-button.png
    └── warner.svg
├── .github
    └── workflows
    │   └── project.yml
├── style
    └── style.css
├── LICENSE
├── .gitignore
├── index.html
├── js
    ├── guardrails.js
    └── app.js
└── README.md


/export/README.md:
--------------------------------------------------------------------------------
1 | Export your RNBO code into this directory.


--------------------------------------------------------------------------------
/img/js-export-location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cycling74/rnbo.example.webpage/HEAD/img/js-export-location.png


--------------------------------------------------------------------------------
/img/use-this-template-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cycling74/rnbo.example.webpage/HEAD/img/use-this-template-button.png


--------------------------------------------------------------------------------
/.github/workflows/project.yml:
--------------------------------------------------------------------------------
 1 | name: Add Issues and PRs to RNBO Project
 2 | 
 3 | on:
 4 |   issues:
 5 |     types:
 6 |       - opened
 7 |   pull_request:
 8 |     types:
 9 |       - opened
10 | 
11 | jobs:
12 |   add-to-project:
13 |     name: Add to RNBO Project
14 |     runs-on: ubuntu-latest
15 |     steps:
16 |       - uses: actions/add-to-project@v0.3.0
17 |         with:
18 |           project-url: https://github.com/orgs/Cycling74/projects/${{ secrets.RNBO_PROJECT_NUMBER }}
19 |           github-token: ${{ secrets.RNBO_PROJECT_PAT }}
20 |           
21 | 


--------------------------------------------------------------------------------
/img/warner.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="127.03" height="197.49" viewBox="0 0 127.03 197.49">
2 |   <g>
3 |     <path d="M262.7,294l-13.83-7.18a7.13,7.13,0,0,1-3.15-9.57L302.39,146.4a7.12,7.12,0,0,1,9.64-2.92l31.58,16.39a7.13,7.13,0,0,1,3.16,9.57L272.34,291.08A7.11,7.11,0,0,1,262.7,294Z" transform="translate(-221.01 -142.15)" style="fill: #fbd7e7;stroke: #fff;stroke-miterlimit: 10"/>
4 |     <rect x="222.8" y="303.08" width="34.77" height="34.77" rx="13.67" transform="translate(-46.33 -216.77) rotate(27.44)" style="fill: #fbd7e7;stroke: #fff;stroke-miterlimit: 10"/>
5 |   </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/style/style.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | #rnbo-root {
 6 |     height: 100vh;
 7 |     width: 100vw;
 8 | }
 9 | #background {
10 |     position: absolute;
11 |     z-index: -1;
12 | }
13 | 
14 | h2, em {
15 |     width: 100%;
16 | }
17 | 
18 | #rnbo-root {
19 |     margin: auto;
20 |     max-width: 540px;
21 | }
22 | 
23 | #rnbo-clickable-keyboard {
24 |     display: flex;
25 |     flex-wrap: wrap;
26 | }
27 | 
28 | #rnbo-clickable-keyboard > div {
29 |     margin: 2px;
30 |     border: solid black 1px;
31 |     min-height: 50px;
32 |     flex-grow: 1;
33 |     display: flex;
34 |     justify-content: center;
35 |     align-items: center;
36 | }
37 | 
38 | #rnbo-clickable-keyboard > div.clicked {
39 |     background: #222222;
40 |     color: #dddddd;
41 | }
42 | 
43 | #rnbo-parameter-sliders {
44 |     display: flex;
45 |     flex-direction: column;
46 | }
47 | 
48 | #rnbo-parameter-sliders > div {
49 |     display: flex;
50 | }
51 | 
52 | #rnbo-parameter-sliders > div > input:first-of-type {
53 |     flex-grow: 1;
54 | }
55 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Cycling '74
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | .DS_STORE
  2 | 
  3 | # Logs
  4 | logs
  5 | *.log
  6 | npm-debug.log*
  7 | yarn-debug.log*
  8 | yarn-error.log*
  9 | lerna-debug.log*
 10 | 
 11 | # Diagnostic reports (https://nodejs.org/api/report.html)
 12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 13 | 
 14 | # Runtime data
 15 | pids
 16 | *.pid
 17 | *.seed
 18 | *.pid.lock
 19 | 
 20 | # Directory for instrumented libs generated by jscoverage/JSCover
 21 | lib-cov
 22 | 
 23 | # Coverage directory used by tools like istanbul
 24 | coverage
 25 | *.lcov
 26 | 
 27 | # nyc test coverage
 28 | .nyc_output
 29 | 
 30 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 31 | .grunt
 32 | 
 33 | # Bower dependency directory (https://bower.io/)
 34 | bower_components
 35 | 
 36 | # node-waf configuration
 37 | .lock-wscript
 38 | 
 39 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 40 | build/Release
 41 | 
 42 | # Dependency directories
 43 | node_modules/
 44 | jspm_packages/
 45 | 
 46 | # TypeScript v1 declaration files
 47 | typings/
 48 | 
 49 | # TypeScript cache
 50 | *.tsbuildinfo
 51 | 
 52 | # Optional npm cache directory
 53 | .npm
 54 | 
 55 | # Optional eslint cache
 56 | .eslintcache
 57 | 
 58 | # Microbundle cache
 59 | .rpt2_cache/
 60 | .rts2_cache_cjs/
 61 | .rts2_cache_es/
 62 | .rts2_cache_umd/
 63 | 
 64 | # Optional REPL history
 65 | .node_repl_history
 66 | 
 67 | # Output of 'npm pack'
 68 | *.tgz
 69 | 
 70 | # Yarn Integrity file
 71 | .yarn-integrity
 72 | 
 73 | # dotenv environment variables file
 74 | .env
 75 | .env.test
 76 | 
 77 | # parcel-bundler cache (https://parceljs.org/)
 78 | .cache
 79 | 
 80 | # Next.js build output
 81 | .next
 82 | 
 83 | # Nuxt.js build / generate output
 84 | .nuxt
 85 | dist
 86 | 
 87 | # Gatsby files
 88 | .cache/
 89 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 90 | # https://nextjs.org/blog/next-9-1#public-directory-support
 91 | # public
 92 | 
 93 | # vuepress build output
 94 | .vuepress/dist
 95 | 
 96 | # Serverless directories
 97 | .serverless/
 98 | 
 99 | # FuseBox cache
100 | .fusebox/
101 | 
102 | # DynamoDB Local files
103 | .dynamodb/
104 | 
105 | # TernJS port file
106 | .tern-port
107 | 
108 | # Ignore exported files
109 | export/*.json
110 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <meta name="rnbo-version" content="1.0.0-alpha.5">
 8 |     <link rel="stylesheet" href="style/style.css">
 9 |     <title>RNBO Web Export</title>
10 | </head>
11 | 
12 | <body>
13 |     <noscript>You need to enable JavaScript to run this app.</noscript>
14 |     <svg id="background" width="100%" height="100%"></svg>
15 |     <div id="rnbo-root">
16 | 		<div>
17 | 			<h1 id="patcher-title">Unnamed patcher</h1>
18 | 		</div>
19 |         <div id="rnbo-clickable-keyboard">
20 |             <h2>MIDI Keyboard</h2>
21 |             <em id="no-midi-label">No MIDI input</em>
22 |         </div>
23 |         <div id="rnbo-inports">
24 |             <h2>Inports</h2>
25 |             <em id="no-inports-label">No inports available</em>
26 |             <form id="inport-form" className="inport">
27 |                 <div className="inport-input">
28 |                     <select id="inport-select"></select>
29 |                     <input id="inport-text" type="text"></input>
30 |                     <input id="inport-submit" className="smallButton" type="submit" value="Send"/>
31 |                 </div>
32 |             </form>
33 |         </div>
34 | 		<div id="rnbo-console">
35 | 			<h2>Outports</h2>
36 | 			<em id="no-outports-label">No outports available</em>
37 | 			<div id="rnbo-console-div">
38 | 				<p id="rnbo-console-readout">Waiting for messages...</p>
39 | 				<em id="rnbo-console-description">Check the developer console for more messages from the RNBO device</em>
40 | 			</div>
41 | 		</div>
42 | 		<div id="rnbo-presets">
43 | 			<h2>Presets</h2>
44 | 			<em id="no-presets-label">No presets defined</em>
45 | 			<select id="preset-select"></select>
46 | 		</div>
47 |         <div id="rnbo-parameter-sliders">
48 |             <h2>Parameters</h2>
49 |             <em id="no-param-label">No parameters</em>
50 |         </div>
51 |     </div>
52 | 
53 |     <!-- Load the script that creates the RNBO device  -->
54 |     <!-- Uncomment if you know the version of your exported RNBO patch to avoid dynamic loading -->
55 |     <!-- <script type="text/javascript" src="https://cdn.cycling74.com/rnbo/latest/rnbo.min.js"></script> -->
56 | 
57 |     <!-- (Optional) The guardrails.js script isn't required for RNBO to work, and you can skip including it -->
58 |     <!-- It simply offers some helpful error messages for common problems -->
59 |     <script type="text/javascript" src="js/guardrails.js"></script>
60 | 
61 |     <!-- Import RNBO Engine Wrapper -->
62 |     <!-- Make sure to include the RNBO engine version to the version of your exported code, found in rnbopackage.json -->
63 |     <script type="text/javascript" src="js/app.js"></script>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/js/guardrails.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * This file just contains a bunch of checks to try to help you avoid some
  3 |  * common errors. You don't need to include this file in your project, but
  4 |  * you can if you want to.
  5 |  */
  6 | 
  7 | const guardrailsErrors = [];
  8 | 
  9 | const displayObtrusiveErrors = (errors) => {
 10 |     if (errors.length <= 0) return;
 11 | 
 12 |     const column = document.createElement('div');
 13 |     column.setAttribute('style', 
 14 |         `max-width: 560px;
 15 |         display: flex;
 16 |         justify-content: center;
 17 |         align-items: center;
 18 |         margin: 0 auto;
 19 |         height: 100%;
 20 |         position: absolute;
 21 |         top: 0;
 22 |         flex-direction: column;
 23 |         `
 24 |     );
 25 | 
 26 |     errors.forEach(error => {
 27 |         const { header, description } = error;
 28 |         const container = document.createElement('div');
 29 |         container.setAttribute(
 30 |             'style',
 31 |             `border-radius: 5px;
 32 |             border: gray solid 1px;
 33 |             width: 100%;
 34 |             padding: 25px;
 35 |             margin-bottom: 8px;
 36 |             background-color: white;
 37 |             background: #EA5050;
 38 |             color: white;`
 39 |         );
 40 |         const h1 = document.createElement('h1');
 41 |         h1.appendChild(document.createTextNode(header));
 42 |         h1.setAttribute(
 43 |             'style', 
 44 |             `margin-bottom: 15px;
 45 |             border-bottom: dashed 1px gray;
 46 |             padding-bottom: 15px;`
 47 |         );
 48 |         const explainer = document.createElement('p');
 49 |         explainer.appendChild(
 50 |             document.createTextNode(
 51 |                 description
 52 |             )
 53 |         );
 54 |     
 55 |         column.appendChild(container);
 56 |         container.appendChild(h1);
 57 |         container.appendChild(explainer);
 58 |     });
 59 | 
 60 |     document.getElementById("rnbo-root").appendChild(column);
 61 | 
 62 |     const svg = document.getElementById('background');
 63 |     
 64 |     svg.innerHTML =
 65 |         `<defs>
 66 |             <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
 67 |                 
 68 |             <g transform="scale(0.3 0.3) translate(150 50)">
 69 |                 <path d="M262.7,294l-13.83-7.18a7.13,7.13,0,0,1-3.15-9.57L302.39,146.4a7.12,7.12,0,0,1,9.64-2.92l31.58,16.39a7.13,7.13,0,0,1,3.16,9.57L272.34,291.08A7.11,7.11,0,0,1,262.7,294Z" transform="translate(-221.01 -142.15)" style="fill: #fbd7e7;stroke: #fff;stroke-miterlimit: 10"/>
 70 |                 <rect x="222.8" y="303.08" width="34.77" height="34.77" rx="13.67" transform="translate(-46.33 -216.77) rotate(27.44)" style="fill: #fbd7e7;stroke: #fff;stroke-miterlimit: 10"/>
 71 |             </g>
 72 |                 
 73 |             </pattern>
 74 |         </defs>
 75 |     
 76 |         <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"></rect>`;
 77 | };
 78 | 
 79 | const checkIfLocationIsFileURL = (errors) => {
 80 |     if (window.location.protocol === 'file:') {
 81 |         errors.push({
 82 |             header: 'file:// access not supported',
 83 |             description: 'In order for RNBO to work in the browser, the device has to be served' +
 84 |             ' from a web server. That means that you can\'t just double-click the' +
 85 |             ' index.html file. Check out README.md for instructions on how to run' +
 86 |             ' a static web server.'
 87 |         });
 88 |     }
 89 | };
 90 | 
 91 | const guardrails = (errorContext) => {
 92 |     if (errorContext) {
 93 |         const finalErrorContext = Object.assign({
 94 |             header: `Error during setup`,
 95 |             description: `${errorContext.error}`
 96 |         }, errorContext);
 97 |         guardrailsErrors.push(finalErrorContext);
 98 |     }
 99 | 
100 |     checkIfLocationIsFileURL(guardrailsErrors);
101 |     displayObtrusiveErrors(guardrailsErrors);
102 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # RNBO Webpage Example
  2 | 
  3 | This example shows you how to add dynamic audio to a webpage, using the web export feature of RNBO, part of [Max 8](https://cycling74.com/products/max) made by [Cycling '74](https://cycling74.com).
  4 | 
  5 | This repository uses [Node](https://nodejs.org/en/) to launch a simple web server to make your webpage available locally. For more on why this is necessary, see [Why a local server?](#why-a-local-server)
  6 | 
  7 | ## Prerequisites
  8 | 
  9 | In order to run this example, you'll need `node`, `npm`, and access to the command line. The `npx` binary ships with `node`, so just download and install that from the [Node.js downloads site](https://nodejs.org/en/download/). The recommended version is their latest `LTS`, which at the time of writing this document is version 16.
 10 | 
 11 | If have heard about `node` and `npm` before but would like to know more about the included `npx` Package Runner please refer to the [Node.js Documentation](https://nodejs.dev/learn/the-npx-nodejs-package-runner).
 12 | 
 13 | ## File structure
 14 | 
 15 | The source code of the web application is in the `js/` directory. This directory contains the file `app.js`, which does all the work of loading and connecting your RNBO patch. There is also a file `guardrails.js`, which simply tries to provide some clear feedback if you're not running this example in the intended way.
 16 | 
 17 | Some notable files/directories:
 18 | 
 19 | | Location                          | Explanation   |
 20 | | --------------------------------- | ------------- |
 21 | | export/                           | The directory into which you should export your RNBO code |
 22 | | js/                               | Source for the project, edit it however you like |
 23 | | index.html                        | The web page itself |
 24 | 
 25 | ## Using this Template
 26 | 
 27 | This Github repo is a template, which means you can use it to start your own git-based project using this repository as a starting point. The major difference between a template and a fork is that your new project won't include the commit history of this template--it will be an entirely new starting point. For more see [the official description](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template).
 28 | 
 29 | ### Getting Started
 30 | 
 31 | To get started, first create a new repository to hold your project using this repository as a template. If you're viewing this repo on Github, you should see a button at the top of the page that says `Use this template`. 
 32 | 
 33 | ![Use this template button](./img/use-this-template-button.png)
 34 | 
 35 | You can also follow [the official steps](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template) on Github for creating a new repository from a template.
 36 | 
 37 | Now you need to copy this repository locally. Follow [the official steps](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) to clone your repository.
 38 | 
 39 | ### Working with RNBO
 40 | 
 41 | Next, open the RNBO patcher you'd like to work with, and navigate to the export sidebar. Find the "Web Export" target.
 42 | 
 43 | ![Web export in the sidebar](./img/js-export-location.png)
 44 | 
 45 | Export your project, making sure to export into the `export` folder in your repository directory. Your export directory should look something like this:
 46 | 
 47 | ```
 48 | export/
 49 | ├─ patch.export.json
 50 | ├─ README.md
 51 | ```
 52 | 
 53 | Whenever you make a change to your RNBO patch, remember to export the source code again to update this file. Now that you've exported your RNBO code, we're ready to open the webpage. From the repository root, run the following command to start the local web server
 54 | 
 55 | ```sh
 56 | npx http-server
 57 | ```
 58 | 
 59 | When asked to install the `http-server` in order to proceed simply agree by using `y`. You will only have to agree on that once.
 60 | Once the server started up successfully you may see something like the following in the console:
 61 | 
 62 | ```sh
 63 | Available on:
 64 |   http://127.0.0.1:8080
 65 |   http://192.168.88.139:8080
 66 | Hit CTRL-C to stop the server
 67 | ```
 68 | Open the shown URL, fe. `http://127.0.0.1:8080` in your default browser, if everything went well, you should see and hear your RNBO patch.
 69 | 
 70 | ### Exporting a new patch
 71 | 
 72 | This example looks in the `export` directory for a patch named `patch.export.json`. If you change the name of your export to something other than `patch.export.json`, you'll need to change the JavaScript as well. In `js/app.js`, the line:
 73 | 
 74 | ```js
 75 | const patchExportURL = "export/patch.export.json";
 76 | ```
 77 | 
 78 | can be changed to reflect the name of your export.
 79 | 
 80 | ## Troubleshooting
 81 | 
 82 | ### Why don't I see anything?
 83 | 
 84 | First, check your developer console. On MacOS, you can bring this up in most browsers by pressing Command-Option-I on a Mac. Firefox puts developer tools under Tools > Browser Tools > Web Developer Tools. Other browsers may put this feature somewhere else, so check the documentation for your browser of choice. The important thing to do here is to make sure you don't see any error. If you see something in red, read the message carefully.
 85 | 
 86 | ### Something doesn't seem to be working right
 87 | 
 88 | It might be that the version of RNBO that you used to export your patch doesn't match the version of the RNBO library that `index.html` is downloading. Look for a message in the developer console talking about mismatched versions. To fix this, either export a version of your patch using a more up-to-date version of RNBO, or else change the `script` tags in `index.html` to download a different version of the RNBO libraries.
 89 | 
 90 | ### My samples aren't loading correctly
 91 | 
 92 | Again check the developer console, this time looking for error messages about a failure to decode audio data. Some browsers, like Chrome for example, don't support decoding `.aif` files. So if you're using `anton.aif` as a sample dependency, you should export again using `anton.wav`. Or maybe find another sample to use.
 93 | 
 94 | ### Why isn't my patch changing in the browser?
 95 | 
 96 | If you changed your exported patch in the `export` folder but your patch isn't changing in the browser, you might need to hard refresh the page (cmd+shift+R). This clears the cache to account for any changes to the page being served.
 97 | 
 98 | ## Why a local server?
 99 | We're recreating on a very small scale what happens whenever you load a website on your computer. When you run `npx http-server`, a Node process starts. This process binds to a port on your machine, defaulting to port 8080. When your browser tries to access the website `http://localhost:8080`, it connects to the server and tries to get the content for the given path, which is `/`. Given this path, the server returns the contents of the file `index.html`, which is what you see when you load the page.
100 | 
101 | As part of loading that page, your web browser also asks the server for the JavaScript file at `js/app.js`. When the browser executes this script, it makes yet another request to fetch the file at the path `export/patch.export.json`. Finally, the script can use this exported patch to create a RNBO JavaScript object and connect it to the audio graph in the current page.
102 | 
103 | The important takeaway here is that this is the kind of interaction that your browser is expecting: making HTTP and HTTPS requests to fetch resources from a remote server. It's technically possible to simply double-click on the `index.html` file and to load the page using the `file:` protocol instead of `http:` or `https:`. However, for security reasons this will block access to `WebAssembly` or `AudioWorklets`, which will keep our exported RNBO patch from working the way we want. Running a local server lets the browser treat the webpage as if it were pulled from the internet like any other page.
104 | 
105 | The other reason that we run a server this way is because this brings us much closer to putting our RNBO patch on the publically accessible internet. If you want to build a public website containing a RNBO patch, it's helpful to keep this simple example in mind when you think about what resources to put where.
106 | 
107 | ## Customizing your web page
108 | 
109 | From this point, the sky is the limit. You can do anything and everything to your web page, adding custom graphics and interaction in whatever way you like. A full discussion of web programming is beyond the scope of this README, but some useful reading material would include:
110 | 
111 | - [ReactJS](https://reactjs.org/)
112 | - [p5JS](https://p5js.org/)
113 | - [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)
114 | - [Netlify](https://www.netlify.com/)
115 | 


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
  1 | async function setup() {
  2 |     const patchExportURL = "export/patch.export.json";
  3 | 
  4 |     // Create AudioContext
  5 |     const WAContext = window.AudioContext || window.webkitAudioContext;
  6 |     const context = new WAContext();
  7 | 
  8 |     // Create gain node and connect it to audio output
  9 |     const outputNode = context.createGain();
 10 |     outputNode.connect(context.destination);
 11 |     
 12 |     // Fetch the exported patcher
 13 |     let response, patcher;
 14 |     try {
 15 |         response = await fetch(patchExportURL);
 16 |         patcher = await response.json();
 17 |     
 18 |         if (!window.RNBO) {
 19 |             // Load RNBO script dynamically
 20 |             // Note that you can skip this by knowing the RNBO version of your patch
 21 |             // beforehand and just include it using a <script> tag
 22 |             await loadRNBOScript(patcher.desc.meta.rnboversion);
 23 |         }
 24 | 
 25 |     } catch (err) {
 26 |         const errorContext = {
 27 |             error: err
 28 |         };
 29 |         if (response && (response.status >= 300 || response.status < 200)) {
 30 |             errorContext.header = `Couldn't load patcher export bundle`,
 31 |             errorContext.description = `Check app.js to see what file it's trying to load. Currently it's` +
 32 |             ` trying to load "${patchExportURL}". If that doesn't` + 
 33 |             ` match the name of the file you exported from RNBO, modify` + 
 34 |             ` patchExportURL in app.js.`;
 35 |         }
 36 |         if (typeof guardrails === "function") {
 37 |             guardrails(errorContext);
 38 |         } else {
 39 |             throw err;
 40 |         }
 41 |         return;
 42 |     }
 43 |     
 44 |     // (Optional) Fetch the dependencies
 45 |     let dependencies = [];
 46 |     try {
 47 |         const dependenciesResponse = await fetch("export/dependencies.json");
 48 |         dependencies = await dependenciesResponse.json();
 49 | 
 50 |         // Prepend "export" to any file dependenciies
 51 |         dependencies = dependencies.map(d => d.file ? Object.assign({}, d, { file: "export/" + d.file }) : d);
 52 |     } catch (e) {}
 53 | 
 54 |     // Create the device
 55 |     let device;
 56 |     try {
 57 |         device = await RNBO.createDevice({ context, patcher });
 58 |     } catch (err) {
 59 |         if (typeof guardrails === "function") {
 60 |             guardrails({ error: err });
 61 |         } else {
 62 |             throw err;
 63 |         }
 64 |         return;
 65 |     }
 66 | 
 67 |     // (Optional) Load the samples
 68 |     if (dependencies.length)
 69 |         await device.loadDataBufferDependencies(dependencies);
 70 | 
 71 |     // Connect the device to the web audio graph
 72 |     device.node.connect(outputNode);
 73 | 
 74 |     // (Optional) Extract the name and rnbo version of the patcher from the description
 75 |     document.getElementById("patcher-title").innerText = (patcher.desc.meta.filename || "Unnamed Patcher") + " (v" + patcher.desc.meta.rnboversion + ")";
 76 | 
 77 |     // (Optional) Automatically create sliders for the device parameters
 78 |     makeSliders(device);
 79 | 
 80 |     // (Optional) Create a form to send messages to RNBO inputs
 81 |     makeInportForm(device);
 82 | 
 83 |     // (Optional) Attach listeners to outports so you can log messages from the RNBO patcher
 84 |     attachOutports(device);
 85 | 
 86 |     // (Optional) Load presets, if any
 87 |     loadPresets(device, patcher);
 88 | 
 89 |     // (Optional) Connect MIDI inputs
 90 |     makeMIDIKeyboard(device);
 91 | 
 92 |     document.body.onclick = () => {
 93 |         context.resume();
 94 |     }
 95 | 
 96 |     // Skip if you're not using guardrails.js
 97 |     if (typeof guardrails === "function")
 98 |         guardrails();
 99 | }
100 | 
101 | function loadRNBOScript(version) {
102 |     return new Promise((resolve, reject) => {
103 |         if (/^\d+\.\d+\.\d+-dev$/.test(version)) {
104 |             throw new Error("Patcher exported with a Debug Version!\nPlease specify the correct RNBO version to use in the code.");
105 |         }
106 |         const el = document.createElement("script");
107 |         el.src = "https://c74-public.nyc3.digitaloceanspaces.com/rnbo/" + encodeURIComponent(version) + "/rnbo.min.js";
108 |         el.onload = resolve;
109 |         el.onerror = function(err) {
110 |             console.log(err);
111 |             reject(new Error("Failed to load rnbo.js v" + version));
112 |         };
113 |         document.body.append(el);
114 |     });
115 | }
116 | 
117 | function makeSliders(device) {
118 |     let pdiv = document.getElementById("rnbo-parameter-sliders");
119 |     let noParamLabel = document.getElementById("no-param-label");
120 |     if (noParamLabel && device.numParameters > 0) pdiv.removeChild(noParamLabel);
121 | 
122 |     // This will allow us to ignore parameter update events while dragging the slider.
123 |     let isDraggingSlider = false;
124 |     let uiElements = {};
125 | 
126 |     device.parameters.forEach(param => {
127 |         // Subpatchers also have params. If we want to expose top-level
128 |         // params only, the best way to determine if a parameter is top level
129 |         // or not is to exclude parameters with a '/' in them.
130 |         // You can uncomment the following line if you don't want to include subpatcher params
131 |         
132 |         //if (param.id.includes("/")) return;
133 | 
134 |         // Create a label, an input slider and a value display
135 |         let label = document.createElement("label");
136 |         let slider = document.createElement("input");
137 |         let text = document.createElement("input");
138 |         let sliderContainer = document.createElement("div");
139 |         sliderContainer.appendChild(label);
140 |         sliderContainer.appendChild(slider);
141 |         sliderContainer.appendChild(text);
142 | 
143 |         // Add a name for the label
144 |         label.setAttribute("name", param.name);
145 |         label.setAttribute("for", param.name);
146 |         label.setAttribute("class", "param-label");
147 |         label.textContent = `${param.name}: `;
148 | 
149 |         // Make each slider reflect its parameter
150 |         slider.setAttribute("type", "range");
151 |         slider.setAttribute("class", "param-slider");
152 |         slider.setAttribute("id", param.id);
153 |         slider.setAttribute("name", param.name);
154 |         slider.setAttribute("min", param.min);
155 |         slider.setAttribute("max", param.max);
156 |         if (param.steps > 1) {
157 |             slider.setAttribute("step", (param.max - param.min) / (param.steps - 1));
158 |         } else {
159 |             slider.setAttribute("step", (param.max - param.min) / 1000.0);
160 |         }
161 |         slider.setAttribute("value", param.value);
162 | 
163 |         // Make a settable text input display for the value
164 |         text.setAttribute("value", param.value.toFixed(1));
165 |         text.setAttribute("type", "text");
166 | 
167 |         // Make each slider control its parameter
168 |         slider.addEventListener("pointerdown", () => {
169 |             isDraggingSlider = true;
170 |         });
171 |         slider.addEventListener("pointerup", () => {
172 |             isDraggingSlider = false;
173 |             slider.value = param.value;
174 |             text.value = param.value.toFixed(1);
175 |         });
176 |         slider.addEventListener("input", () => {
177 |             let value = Number.parseFloat(slider.value);
178 |             param.value = value;
179 |         });
180 | 
181 |         // Make the text box input control the parameter value as well
182 |         text.addEventListener("keydown", (ev) => {
183 |             if (ev.key === "Enter") {
184 |                 let newValue = Number.parseFloat(text.value);
185 |                 if (isNaN(newValue)) {
186 |                     text.value = param.value;
187 |                 } else {
188 |                     newValue = Math.min(newValue, param.max);
189 |                     newValue = Math.max(newValue, param.min);
190 |                     text.value = newValue;
191 |                     param.value = newValue;
192 |                 }
193 |             }
194 |         });
195 | 
196 |         // Store the slider and text by name so we can access them later
197 |         uiElements[param.id] = { slider, text };
198 | 
199 |         // Add the slider element
200 |         pdiv.appendChild(sliderContainer);
201 |     });
202 | 
203 |     // Listen to parameter changes from the device
204 |     device.parameterChangeEvent.subscribe(param => {
205 |         if (!isDraggingSlider)
206 |             uiElements[param.id].slider.value = param.value;
207 |         uiElements[param.id].text.value = param.value.toFixed(1);
208 |     });
209 | }
210 | 
211 | function makeInportForm(device) {
212 |     const idiv = document.getElementById("rnbo-inports");
213 |     const inportSelect = document.getElementById("inport-select");
214 |     const inportText = document.getElementById("inport-text");
215 |     const inportForm = document.getElementById("inport-form");
216 |     let inportTag = null;
217 |     
218 |     // Device messages correspond to inlets/outlets or inports/outports
219 |     // You can filter for one or the other using the "type" of the message
220 |     const messages = device.messages;
221 |     const inports = messages.filter(message => message.type === RNBO.MessagePortType.Inport);
222 | 
223 |     if (inports.length === 0) {
224 |         idiv.removeChild(document.getElementById("inport-form"));
225 |         return;
226 |     } else {
227 |         idiv.removeChild(document.getElementById("no-inports-label"));
228 |         inports.forEach(inport => {
229 |             const option = document.createElement("option");
230 |             option.innerText = inport.tag;
231 |             inportSelect.appendChild(option);
232 |         });
233 |         inportSelect.onchange = () => inportTag = inportSelect.value;
234 |         inportTag = inportSelect.value;
235 | 
236 |         inportForm.onsubmit = (ev) => {
237 |             // Do this or else the page will reload
238 |             ev.preventDefault();
239 | 
240 |             // Turn the text into a list of numbers (RNBO messages must be numbers, not text)
241 |             const values = inportText.value.split(/\s+/).map(s => parseFloat(s));
242 |             
243 |             // Send the message event to the RNBO device
244 |             let messageEvent = new RNBO.MessageEvent(RNBO.TimeNow, inportTag, values);
245 |             device.scheduleEvent(messageEvent);
246 |         }
247 |     }
248 | }
249 | 
250 | function attachOutports(device) {
251 |     const outports = device.outports;
252 |     if (outports.length < 1) {
253 |         document.getElementById("rnbo-console").removeChild(document.getElementById("rnbo-console-div"));
254 |         return;
255 |     }
256 | 
257 |     document.getElementById("rnbo-console").removeChild(document.getElementById("no-outports-label"));
258 |     device.messageEvent.subscribe((ev) => {
259 | 
260 |         // Ignore message events that don't belong to an outport
261 |         if (outports.findIndex(elt => elt.tag === ev.tag) < 0) return;
262 | 
263 |         // Message events have a tag as well as a payload
264 |         console.log(`${ev.tag}: ${ev.payload}`);
265 | 
266 |         document.getElementById("rnbo-console-readout").innerText = `${ev.tag}: ${ev.payload}`;
267 |     });
268 | }
269 | 
270 | function loadPresets(device, patcher) {
271 |     let presets = patcher.presets || [];
272 |     if (presets.length < 1) {
273 |         document.getElementById("rnbo-presets").removeChild(document.getElementById("preset-select"));
274 |         return;
275 |     }
276 | 
277 |     document.getElementById("rnbo-presets").removeChild(document.getElementById("no-presets-label"));
278 |     let presetSelect = document.getElementById("preset-select");
279 |     presets.forEach((preset, index) => {
280 |         const option = document.createElement("option");
281 |         option.innerText = preset.name;
282 |         option.value = index;
283 |         presetSelect.appendChild(option);
284 |     });
285 |     presetSelect.onchange = () => device.setPreset(presets[presetSelect.value].preset);
286 | }
287 | 
288 | function makeMIDIKeyboard(device) {
289 |     let mdiv = document.getElementById("rnbo-clickable-keyboard");
290 |     if (device.numMIDIInputPorts === 0) return;
291 | 
292 |     mdiv.removeChild(document.getElementById("no-midi-label"));
293 | 
294 |     const midiNotes = [49, 52, 56, 63];
295 |     midiNotes.forEach(note => {
296 |         const key = document.createElement("div");
297 |         const label = document.createElement("p");
298 |         label.textContent = note;
299 |         key.appendChild(label);
300 |         key.addEventListener("pointerdown", () => {
301 |             let midiChannel = 0;
302 | 
303 |             // Format a MIDI message paylaod, this constructs a MIDI on event
304 |             let noteOnMessage = [
305 |                 144 + midiChannel, // Code for a note on: 10010000 & midi channel (0-15)
306 |                 note, // MIDI Note
307 |                 100 // MIDI Velocity
308 |             ];
309 |         
310 |             let noteOffMessage = [
311 |                 128 + midiChannel, // Code for a note off: 10000000 & midi channel (0-15)
312 |                 note, // MIDI Note
313 |                 0 // MIDI Velocity
314 |             ];
315 |         
316 |             // Including rnbo.min.js (or the unminified rnbo.js) will add the RNBO object
317 |             // to the global namespace. This includes the TimeNow constant as well as
318 |             // the MIDIEvent constructor.
319 |             let midiPort = 0;
320 |             let noteDurationMs = 250;
321 |         
322 |             // When scheduling an event to occur in the future, use the current audio context time
323 |             // multiplied by 1000 (converting seconds to milliseconds) for now.
324 |             let noteOnEvent = new RNBO.MIDIEvent(device.context.currentTime * 1000, midiPort, noteOnMessage);
325 |             let noteOffEvent = new RNBO.MIDIEvent(device.context.currentTime * 1000 + noteDurationMs, midiPort, noteOffMessage);
326 |         
327 |             device.scheduleEvent(noteOnEvent);
328 |             device.scheduleEvent(noteOffEvent);
329 | 
330 |             key.classList.add("clicked");
331 |         });
332 | 
333 |         key.addEventListener("pointerup", () => key.classList.remove("clicked"));
334 | 
335 |         mdiv.appendChild(key);
336 |     });
337 | }
338 | 
339 | setup();
340 | 


--------------------------------------------------------------------------------