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)

hardware control of webaudio API

programming

This is a tweak of a demo program by Boris Smus from http://webaudioapi.com

The audio is generated in the web browser using the webaudio API. Oscillator frequency is being controlled by an iPod touch running touchOSC.

A ruby program is running in the background. It starts 2 servers, one to handle Osc messages from the iPod. and a websockets server which passes Osc messages to the web client in the browser, which parses the data and sets oscillator frequency.

local source files in tkzic/web-audio-api/webaudioapi/content/posts/oscillator-ws

instructions

(these are for my local files – source has not been published yet) Please contact me directly for more information about this code. Or have a look at a very similar example at: https://github.com/tkzic/WebAudio

1. run the node webserver in tkzic/

node nodeserver.js

(it will run on localhost port 8081 – for example http://127.0.0.1:8081)

2. In Chrome web browser, run: http://192.168.1.104:8081/web-audio-api/webaudioapi/content/posts/oscillator-ws/index.html

The following screen will appear:

3. From a terminal prompt run this ruby script (in tkzic/web-audio-api/webaudioapi/content/posts/oscillator-ws)

./wapOSCserver.rb

4. In webpage in Chrome, click the sockets button – the ruby server should open a socket connection, also click the play/pause button to start the oscillator

5. In touchOSC point the host to the ip address of the laptop (ie., 192.168.1.104) running on default ports, (out 8000, in 9000)

6. In touchOSC run the ‘simple’ layout and move fader1 to change the pitch of the oscillator

Note: You will probably also want to open the developer javascript console in Chrome to see what is going on.

next step

Need to clean up the ruby server code to handle error conditions, ie., network interruptions, missing files, browser incompatibility, etc.,

 

Getting started with Web Audio API

With full source code examples.

By Boris Smus at HTML5 Rocks

http://www.html5rocks.com/en/tutorials/webaudio/intro/

update 5/2014

To get full source with comments, make a URL in this format – (the buttons on the tutorial page only gives minified JS)

http://www.html5rocks.com/en/tutorials/webaudio/intro/js/rhythm-sample.js?ModPagespeed=off

Here’s a note about it: https://github.com/html5rocks/www.html5rocks.com/issues/367

To get the source for the UI – ie., buttons and sliders – just view the page source for the tutorial

Scheduling Web Audio

http://www.html5rocks.com/en/tutorials/audio/scheduling/

JAM with chrome case study

http://www.html5rocks.com/en/tutorials/casestudies/jamwithchrome-audio/

Case Study: Building Technitone.com

http://www.html5rocks.com/en/tutorials/casestudies/technitone/

 

 

 

 

 

The sound of a new machine

Using internet ping data to control a synthesizer in Max

This project uses ‘ping’ times to about 40 Google domains, like google.ca, google.de, etc., to control pitch and amplitude of a 20 voice droning synthesizer.

Imagine working in a Google control center. A soothing low pitched drone fills the room. Then Suddenly you hear a slowly rising pitch. You check the monitors – Google Paraguay is experiencing network failure. You light a cigarette and wait for things to calm down.

update 2/6/2021

Not using ruby to ping – due to API shutting down. The new version uses the Max [shell] external to ping from the command line.

download

https://github.com/tkzic/internet-sensors

folder: ping

files

main Max patch
  • sound-of-a-new-machine3.maxpat
abstractions and other files

instructions

  • Open the Max patch: sound-of-a-new-machine3.maxpat
  • Turn on audio. Turn up the gain.
  • In the Max patch, click the toggle box to start polling. It may take a minute to hear any sounds, while the oscillators are loading. Increase polling speed to 400 or so if you can’t wait.
  • Another reason you might not hear anything interesting is if the clip threshold is too low. Watch the incoming ping times and set the clip threshold above the average level.
  • Adjust the pitch multiplier to your desired pitch range. It will take some time for all of the oscillators to adjust after a pitch change.
  • If you hear clicks or pops, try reducing the sample rate to 44.1 KHz, or increasing the IO vector size (in Options | Audio Status).

note: Occasionally the server program will time-out when its launched. Try launching again, or edit it and increase the timeout value in [p shellping].


deprecated information for previous version using ruby

The server is a ruby script which handles the http: requests using the Mashape ping-uin API and sends messages to Max using OSC

The synth has a weird clustering drone like effect like some kind of alien life force.

The patch design is kind of embarrassing. Its obvious I forgot how to use [poly~]. Maybe by the time you read this, we’ll have addressed this.  Hey billions of patch cords look cool.

Here’s an example of the Mashape API in curl

curl --include --request GET 'https://igor-zachetly-ping-uin.p.mashape.com/pinguin.php?address=google.ca' \
  --header 'X-Mashape-Authorization: YOUR-MASHAPE-API-KEY'

Here’s a list of Google domains

http://en.wikipedia.org/wiki/List_of_Google_domains

download

https://github.com/tkzic/internet-sensors

folder: ping

files

main Max patch
  • sound-of-a-new-machine2.maxpat
abstractions and other files
  • google.txt (list of domains for [coll] object
ruby
  • domain-ping.rb

ruby gems

install the following ruby gems using: sudo xcrun gem install <gem-name>

  • require ‘osc-ruby’
  • require ‘patron’
  • require ‘json’

authorization

  • Register with mashape http://mashape.com to get an API-key for ping-uin
  • Then edit domain-ping.rb to enter your mashape API-key.

instructions

  • Open the Max patch: sound-of-a-new-machine2.maxpat
  • Turn on audio. Turn up the gain.
  • From a terminal window type the following command
# ./domain-ping.rb


  •  In the Max patch, click the toggle box to start polling. It may take a minute to hear any sounds, while the oscillators are loading. Increase polling speed to 400 or so if you can’t wait.
  • Another reason you might not hear anything interesting is if the clip threshold is too low. Watch the incoming ping times and set the clip threshold above the average level.
  • Adjust the pitch multiplier to your desired pitch range.
  • When you’ve had enough, type <ctrl-c> in the terminal window to stop the server.

note: Occasionally the server program will time-out when its launched. Try launching again, or edit it and increase the timeout value.