Posted on by Tom Zicarelli

Web Audio Playground Max, Osc, and WebSockets

updated 5/17/2014

overview

This fork adds the following features to Chris Wilson’s Web Audio Playground:

  • basic patch load/save capability
  • clipboard copy/paste to get patches in and out of browser
  • OSC control of all parameters using web sockets and a ruby server.

Try it out at: http:zerokidz.com/wap/index.html

For optimum results try Chrome on Mac OS. But it does work in other browsers.

Patch file format is JSON. Patches are reloaded by firing gesture events which created them.

download

Source code: https://github.com/tkzic/WebAudio

files

sub-folder: osctest

Instructions for Osc, Websockets Max/MSP example

Note: You can either run a local web server, using nodeserver.js and index.html – in the WebAudio folder – or use the online version of WAP as described here.

1.  Load WAP in a Google Chrome browser using the following URL: http:zerokidz.com/wap/index.html

2. In WAP, load a patch called: delay-thing.

Note: If the patch doesn’t exist you can paste it in by opening the file osctest/delay-thing.json in a text editor and copying the text. Then click paste in WAP and paste in the text. Then make sure to save it in WAP by typing in the name “delay-thing” and clicking the save-as: button

3. In a terminal window, go to the osctest/ folder and start the server by typing:

ruby ./wapOSCserver.rb

4. In WAP, Press the OSC button – the ruby server should acknowledge with the message: “WebSocket connection open”

5. Open the Max patch: wapOSCtester.maxpat

6. In WAP press the play button on the Oscillator module (you should hear sounds)

7. In the Max patch drag the slider on the left to control the oscillator pitch. You should hear the sound change and see the sliders move in WAP.

Notes on Web Sockets connection:

The html side of the connection is done in js/socketsOSC.js

look at the function: connectOSC() – which gets triggered by the OSC button in index.html

Incoming messages from Max (via Ruby server) are parsed in parseOSCMessage() which figures out how to set appropriate values for the audio objects in the DOM.

There are currently no acknowledgement or error messages being returned (at least I don’t remember doing this)