NexusUI   audio interfaces in the browser

• Getting Started        • API
NexusUI 1.0 is here! Read more.

NexusUI is a JavaScript library of audio interface components that can control Web Audio or transmit OSC data to other applications.

NexusUI can be used to integrate directly with the Web Audio API in the browser, or to communicate with Max, SuperCollider or Chuck via server-side applications.

NexusUI is mobile-friendly and multi-touch compatible. It enables large-scale collaborative performances by distributing interfaces through a browser -- something that many people have at home, in their bag, or carry in their pocket.

Download nexusUI.js
All you need to get started!

or view on Github


NexusUI 1.0 is here!

We're happy to announce a major update to NexusUI, which features improvements to several widgets (matrix, keyboard, and vinyl are much more user-friendly), a sturdier codebase, and a much more complete API. That's right, the API might actually have what you're looking for now!

Please poke around the new documentation as some syntax has changed, hopefully for the better. These changes include the way inerface data is accessed in JavaScript, the output data of some objects, and the removal or addition of a few widgets (for example, metroball has been replaced by a simpler metro widget).

We also spruced things up under the hood to make the codebase cleaner and zippier. The code has been updated to CommonJS syntax and is now installable via npm.

Ben 12/20/14
Your browser does not support HTML5. Please update!
Example HTML

<canvas nx="dial"></canvas>

Gallery of Recent Nexus Projects
Add your own by posting to Instagram with the hashtag #nexusui

How to Use Nexus UI

Creating Elements
link to NexusUI
Nexus requires a link to the nexusUI.js library in the head of your HTML document

add elements with <canvas>
Any canvas with a valid nx attribute will turn into a NexusUI interface widget.

valid NexusUI widget names
See the NexusUI API for a complete list of valid NexusUI objects

NexusUI elements include:
dial  •  position  •  keyboard  •  button  •  toggle  •  slider  •  multislider  •  matrix  •  select  •  tilt  •  metro  •  vinyl  •  colors  •  joints
Working with NexusUI in JavaScript
NexusUI is globally instantiated in JavaScript as nx

nx.onload( )
When NexusUI loads, it triggers the nx.onload function which you can define in your JavaScript. Accessing widgets should be done only after NexusUI loads.

element naming
By default, the first dial on the page will be given the JS variable of dial1, the third toggle will be toggle3, etc. You can overwrite this default by giving the canvas an ID attribute in the HTML, which will become the element's js variable name.

Sending data to Max
or another application, with AJAX
We provide templates for OSC communication within several server paradigms. In the Ajax Demo template, we use a PHP file nexusOSCRelay.php to forward data from your interface to a specified IP and port (default IP and port 7475).

nx.sendsTo( )
This template uses nx.sendsTo("ajax") to tell all UI elements to forward data using AJAX. You can override individual elements' paths by setting their .sendsTo() property directly.

nx.setAjaxPath( )
To specify the file path for the PHP script Nexus should use, use nx.setAjaxPath(), for example nx.setAjaxPath("lib/nexusOSCRelay.php")

OSC naming conventions
Each element's OSC name will be the same as its JavaScript variable name. I.e. the first dial on the page will be /dial1, the third dial will be /dial3, etc., unless you set its name with an ID.

This strategy relies on the PHP files in our Ajax Demo and will not work without it unless you provide your own script for the AJAX to execute!
Integrating with Web Audio in JS
or with HTML5 graphics, other NexusUI elements, or other JavaScript
To make UI data accessible from within JavaScript, use nx.sendsTo("js") (this is default)

.on( )
Define individual .on( ) functions for each element you wish to use data from.

nx.allTraffic( )
Or use nx.allTraffic( ) which will receive data from all objects that are sending to js.
Elements auto-adjust to fit the CSS or inline style of the canvas.

Nexus allows for global coloring with nx.colorize or setting individual elements with their .colors property. Parameters to set: accent (default), fill, border, black, white.

experimental music & digital media @ louisiana state univeristy 2013
Fork me on GitHub