Thursday, March 10, 2011

Making Waves: A Primer in Pure JS Generated Audio

Max Goodman at the Meetup. Photo on Flickr.
More and more functionality is being brought into the browser environment, namely HTML, CSS & JavaScript, and this talk, on March 9, is a discussion of the audio functionality that can be brought into the browser. Max Goodman is a lively presenter, and his enthusiasm is contagious. He took us, step by step, as to how to create audio functionality generated from within the Javascript of the page loaded within the browser.
You can find more description about the event on the Meetup social network.
There were two lightning demos at the beginning, both on interesting use of audio in web sites & games:
  1. Alex Hwang, a 13-year old yougster, on http://soundweaver.info/.
  2. Fred Sauer, A member of the Google Developer Advocate team, on http://allen-sauer.com/com.allen_sauer.gwt.game.hornetblast.HornetBlast/HornetBlast.html.
The way Max introduced the main talk of the evening -- slides are posted on the web -- is by the following
Making Waves: The Slide Deck
Slide #3: The <audio> tag of HTML 5.
simple slide #3 that shows that a single HTML 5 tag, namely <audio>, is all that is needed to add audio content to the web page from among the 100 and odd tags. Simple slide, but plenty of suggestive content.
To provide context for the talk, Max traced the way sounds were introduced by, or into, computers starting from the computer CSIRAC in 1951 (slide 8) to present day GarageBand software on the iPad 2 (slide 19).
Subsequently, he went through some basics of physics to introduce sinusoidal waves, frequency, wavelength, amplitude, sampling rate, etc. Afterwards, the encoding for .WAV files was also presented before the JavaScript code to create the encoding was shown. The key take away at this point: .WAV encoding can be created on the fly within JavaScript code. Finally, the use of notes, i.e., sine waves, in the creation of musical sounds, with judicious use of Attack & Decay, use of scale, creating random patterns with the notes of a scale -- all of this creatively done in JavaScript!
He ended the talk by introducing Jasmid, MIDI Synthesis with JavaScript and HTML5 Audio, and suggesting the a future Beyoncé could be from among JavaScript programmers.

All in all, a refreshing introduction to using JavaScript in creating valuable musical sounds, and music.