Web Audio API
A good place to start
There are many links to Web Audio project right here on this blog: https://reactivemusic.net/?tag=web-audio
Technical reference manual
Comprehensive guide from Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
Quick tutorial
- Open a javascript console in a Web browser. This example uses Chrome. From the Chrome menu, select View | Developer | Javascript console
- Type the following commands (in the shaded blocks) into the console:
Assign an instance of the Web Audio class to the object: context
context = new AudioContext();
Make an oscillator node
osc = context.createOscillator();
Connect the oscillator to the audio output (speaker)
osc.connect(context.destination);
Turn on the oscillator at the current time and plays a tone.
osc.noteOn(0);
Turn of the oscillator
osc.noteOff(0);
For more basics, see: “Using the Web Audio API”, at the Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
Basic html examples:
Demonstrated in class. Download from here: https://github.com/tkzic/web-audio-projects
- Oscillator
- Audio file player
HTML versions of examples from Boris Smus’s book: https://reactivemusic.net/?p=6094
Examples
- Plink by Dinahmoe http://labs.dinahmoe.com/plink/
- Web Audio Toy: https://reactivemusic.net/?p=17578
- Sample demos: https://chromium.googlecode.com/svn/trunk/samples/audio/samples.html
-
javascript motion detection http://www.soundstep.com/blog/experiments/jsdetection/ ( broken)
-
infinite jukebox by Paul Lamere http://labs.echonest.com/Uploader/index.html
-
WebGL city http://alteredqualia.com/three/examples/webgl_city.html
-
Ring Visualizer http://airtightinteractive.com/demos/js/reactive/
-
Wave-pd1 (iOS) http://alxgbsn.co.uk/wavepad/
- Granular synthesizers –
- webRTC – https://reactivemusic.net/?p=5174
- Chrome Experiments
-
- webcam music by Karen Peng: http://www.chromeexperiments.com/detail/music/?f=
- Sound Viz by Bartek Drozdz: http://www.chromeexperiments.com/detail/soundviz/?f=
- Noisee by Karen Peng: http://www.chromeexperiments.com/detail/noisee/?f=
-
Tutorials and references
- Basic tutorial: http://middleearmedia.com/web-audio-api-basics/
- “The Web Audio API” by Boris Smus: https://github.com/borismus/webaudioapi.com (github repository)
- html5rocks – tutorials: http://updates.html5rocks.com/2012/01/Web-Audio-FAQ
- Web Audio API getting started (creative.js) http://creativejs.com/resources/web-audio-api-getting-started/
Development (libraries, frameworks)
-
Gibber by Charie Roberts: http://gibber.mat.ucsb.edu/ (for demos, select all code, press <ctrl>-Enter to start, press <ctrl>-. to stop) (updated but check github)
- WebPd – Sebastien Piquemal – https://github.com/sebpiq/WebPd/tree/develop
- gibberface by Charlie Roberts – https://reactivemusic.net/?p=16910
- 5 Web Audio libraries: https://reactivemusic.net/?p=16902
- flocking by Colin Clark https://github.com/colinbdclark/Flocking
- p5js: http://p5js.org/libraries/
tz – examples
- Web Audio API – Web Audio Playground, Google API, Osc, Web Sockets, Max/MSP https://reactivemusic.net/?p=6243
- Hardware control (touchOSC) of Web Audio API https://reactivemusic.net/?p=6142
- Controlling Web Audio with Max (video) https://reactivemusic.net/?p=6212
- Controlling Web Audio with Max https://reactivemusic.net/?p=6193
- Programming a Sine wave in Web Audio (flocking by Colin Clark) https://reactivemusic.net/?p=6574
- Simple Web Audio input (microphone) example: https://reactivemusic.net/?p=3886
Assignment
Write a composition to induce magical effects.
Here is an example from Aseem Suri http://www.aseemsuri.com/journal/piece-of-mind-second-run-at-the-csound-conference
The project was derived from computer technology, but the overall effect was that people would go into a mysterious room, for a minute, and when they emerged, they would be smiling and happy.
Due on December 15th (last class)