The document describes Wuberizer, a web-based sound creator and pseudo-sequencer that allows users to manipulate sound through a 16x16 grid interface. It uses HTML5 technologies like the Web Audio API, Canvas, and EaselJS to generate and process sound. Users can control parameters like frequency, oscillators, filters, and tempo to produce and record sounds.

1. Wuberizer
Stan Bershadskiy
Tyler Knappe
Alex Lazar
https://github.com/ModusCreateOrg/web-audio-api

2. Inspiration

3. Tenori-On
● Electronic Musical Instrument created in
2005
● Goal is to blend light and sound
● Uses a 16 x 16 grid of LEDs as controls
● Generates sound based on cell position

4. Features
Web Audio Sound Creator
● 16 x 16 sound synthesizer and pseudo-
sequencer
● Manipulate the frequency divisor, oscillator
waveform, filters and global tempo
● Record output into a WAV file
● It also has a Reset button in case you want
to delete the whole song and to start over

5. Implementation
Technology used:
● Sencha Touch 2.2
● SASS
● Canvas
● EaselJS
● HTML5 Web Audio API
● Recorder.js

6. Web Audio API
● High level JavaScript API for processing and
synthesizing audio
● Audio Routing Graph Paradigm
○ Two end points that you can connect an arbitrary
number of nodes.
● Some Useful Nodes:
○ GainNode - Controls Volume
○ DelayNode - Implements a delay on the source
○ BiquadFilterNode - Implement a filter on source
○ OscillatorNode - Audio source generating a periodic
waveform
○ AnalyserNode - use with Music Visualizers

7. Routing Graph Used
Destination
Compressor
Master GainOscillator BiquadFilter Oscillator Gain

8. Canvas
● HTML Element that allows for a "resolution-
dependent bitmap canvas which can be
used for rendering graphs, game graphics,
or other visual images on the fly."
● Controlled entirely via JavaScript
● Provides several methods for drawing paths,
boxes, circles, characters, images, and
more.
● Leverage EaselJS for abstraction of the
canvas and treat it as a stage

9. Sencha Touch 2.2
● Leverage MVC paradigm (minus Models)
○ Audio Controller - handles all audio interactions
○ Main Controller - global app controller
● CanvasGrid Component
● Leverage Pictos Icon Font

10. What's Next?
● Implement saving state of grid locally and
sharing it
● Implement multiple active grid layers
● Clean up the popping when turning on and
off oscillators at lower frequencies
● Add in some other sounds, like drums
● Make it work on the iPad :-)

11. DEMO
https://dl.dropboxusercontent.
com/u/74436/wuberizer/index.html

12. Browser Support?
● Currently only supported by Chrome 26+
● Some support for Safari, but not yet fully
implemented

13. ● EaselJS
○ http://www.createjs.com/#!/EaselJS
● Recorder.js
○ https://github.com/mattdiamond/Recorderjs
References