Tag: web audio

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

Make an oscillator node

Connect the oscillator to the audio output (speaker)

Turn on the oscillator at the current time and plays a tone.

Turn of the oscillator

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 –
• • http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html (broken)
  • http://www.chromeexperiments.com/detail/granular-synthesiser/?f=mobile
• 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)