web audio app preso
Post on 22-Oct-2014
1.066 views
DESCRIPTION
TRANSCRIPT
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