Tag: web audio

domain ping machine in Web Audio

A ‘mini’ version of the Google domain ping synthesizer from the internet-sensors collection (Using the Mashape API). This one runs in Web Audio, using the Web Audio Playground with OSC.

Looks like a card game. Anyway it sounds cool. Doesn’t have the panning of the original, but it has an organic sound due to portamento in frequency changes, and more ‘beating’. Here’s a short excerpt.

Another example of Max controlling WAP http://reactivemusic.net/?p=6193



folder is: WebAudio/osctest/


  • wapOSCserver-ping.rb
  • wapPingTest.maxpat
  • WAP patch: – ping2 (5 osc’s -> 5 gains, -> 1 master gain) – ping2.json
  • Web Page: WebAudio/index.html


update: you can run an online version of WAP Web client at http://zerokidz.com/wap/index.html – If you load this page, skip to step 3.

1. run the node webserver in WebAudio

node nodeserver.js

(it will run on localhost port 8081 – for example

2. In Chrome web browser, run:

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


4. Load the Max patch:


5. In Chrome, click the OSC button – the ruby server should open a socket connection

6. Also in Chrome, load the patch: ping2 (note that there is a json copy of this patch ping2.json that can be pasted in, if it doesn’t show up in the menu)

6.5 In WAP, Click the square buttons on the 5 Oscillators to start them playing. You should hear sounds at this point.

7. Now back in Max patch – click green toggle to start polling and you probably want to increase the polling rate to about 50 ms instead of 1000 ms

  • If it doesn’t seem like there is much action in the patch, try adjusting the FREQ_MULT and GAIN_MULT inside the ruby script.
  • You will probably also want to open the developer javascript console in Chrome to see what is going on.

web-audio scriptProcessing

update: here’s how to produce a sine wave: http://reactivemusic.net/?p=6574

General consensus: scriptProcessing is not robust enough to process multiple signal chains.

Other links


Karplus Strong in web audio

Karplus strong synthesis in javascript.

By Achal Dave and Grumdrig at Stack Overflow




Web Audio Playground – mods OSC control




A beautiful player-piano. Music in time and frequency domains.

By Xeiqaio Xu, At Chrome audio experiments



Source code: https://github.com/qiao/euphony

Web Audio Playground Max, Osc, and WebSockets

updated 5/17/2014


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.


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


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)

Matt Diamond’s web audio API: recorderjs and synthjs

The recorder works with the web audio API. There is an example which records audio input from the built in mic, writes it to a .wav file, and creates a link for download.


local version in tkzic/web-audio-api/Recorderjs-master/example_simple_exportwav.html


Web browser Midi plugin

Jazz-soft plugin.


Chris Wilson’s Polyfill version for Web Audio:  https://github.com/cwilso/WebMIDIAPIShim

Note: 3/2013 the multi-multi demo works ok, but the “index.html” example crashed the plugin the first time it ran. After that it was ok.

plugin demo: http://jazz-soft.net/demo/

The web audio API

by Chris Wilson

Slides: http://webaudio-io2012.appspot.com/#1



 Stuff without purpose.

by Daniel Pettersson

Includes: webAudioToy which is visual programming language, with patch cords, for the web audio API. – Note you may need “Chrome” to run these…


local source code: tkzic/uglyhack