Example: Hello WAAX!

To get familiar with WAAX, let us start with the simplest example. It emonstrates a boilerplate, how to instantiate plug-ins, make connections and use GUI elements along with them.

First, boot up the developement server in the terminal.

$ gulp

Then open up examples/hellowaax/index.html in your favorite text editor. You can find the following 3 chunks of code that actually to get WAAX working.

Loading WAAX libraries

The first part is the header. Include waax.min.js first. Then add webcomponent.min.js, which is a polyfill for Web Components to support browsers without the features. Lastly, you can load MUI elements with HTMLImport. Note that MUI requires WAAX to work, but WAAX core library does not rely MUI or Web Components.

<script src="build/waax.min.js"></script>
<script src="build/mui/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="build/mui/mui.html">

You can load your custom WAAX plug-ins, but we will only use a stock plug-in, SimpleOSC in this example.

Creating MUI elements

With all the libraries loaded, you can start create MUI elements, which are custom HTML elements for musical GUI, just like any other HTML element. Make sure to assign unique ID to each element so we can use them in JS code later.

<!-- MUI elements -->
<mui-knob id="k-freq"></mui-knob>
<mui-knob id="k-output"></mui-knob>

Writing JS code

Finally, write JS code at the bottom of the document. Create an instance of SimpleOsc plug-in and connect to WX.Master, that is the master output of WAAX system. Then start generating audio by noteOn() method. 60 means MIDI pitch and 100 for MIDI velocity.

<!-- WAAX JS Code -->
<script>
  MUI.start(function () {
    var osc = WX.SimpleOsc();
    osc.to(WX.Master);
    osc.noteOn(60, 100);
    MUI.$('k-freq').link(osc, 'oscFreq');
    MUI.$('k-output').link(osc, 'output');
  });
</script>

The last two lines of code show how to connect MUI elements with WAAX plug-in parameters. MUI.$('element_id') will give you the reference of MUI element so you can connect to a parameter of a plug-in by .link(plug_in, parameter_name) method.

See the demo and the source code.

What's Next?

• Examples
• WAAX API Reference
• Creating WAAX plug-in