web audio app preso

WuberizerStan Bershadskiy

Tyler KnappeAlex Lazar

https://github.com/ModusCreateOrg/web-audio-api

Inspiration

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

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

Implementation

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

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

Routing Graph Used

Destination

Compressor

Master GainOscillator BiquadFilter Oscillator Gain

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

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

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 :-)

DEMOhttps://dl.dropboxusercontent.

com/u/74436/wuberizer/index.html

Browser Support?

● Currently only supported by Chrome 26+● Some support for Safari, but not yet fully

implemented

● EaselJS○ http://www.createjs.com/#!/EaselJS

● Recorder.js○ https://github.com/mattdiamond/Recorderjs

References