WuberizerStan BershadskiyTyler KnappeAlex Lazarhttps://github.com/ModusCreateOrg/web-audio-api
Inspiration
Tenori-On● Electronic Musical Instrument created in2005● Goal is to blend light and sound● Uses a 16 x 16 grid of LEDs as ...
FeaturesWeb Audio Sound Creator● 16 x 16 sound synthesizer and pseudo-sequencer● Manipulate the frequency divisor, oscilla...
ImplementationTechnology used:● Sencha Touch 2.2● SASS● Canvas● EaselJS● HTML5 Web Audio API● Recorder.js
Web Audio API● High level JavaScript API for processing andsynthesizing audio● Audio Routing Graph Paradigm○ Two end point...
Routing Graph UsedDestinationCompressorMaster GainOscillator BiquadFilter Oscillator Gain
Canvas● HTML Element that allows for a "resolution-dependent bitmap canvas which can beused for rendering graphs, game gra...
Sencha Touch 2.2● Leverage MVC paradigm (minus Models)○ Audio Controller - handles all audio interactions○ Main Controller...
Whats Next?● Implement saving state of grid locally andsharing it● Implement multiple active grid layers● Clean up the pop...
DEMOhttps://dl.dropboxusercontent.com/u/74436/wuberizer/index.html
Browser Support?● Currently only supported by Chrome 26+● Some support for Safari, but not yet fullyimplemented
● EaselJS○ http://www.createjs.com/#!/EaselJS● Recorder.js○ https://github.com/mattdiamond/RecorderjsReferences
Upcoming SlideShare
Loading in...5
×

Web audio app preso

1,154

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,154
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web audio app preso

  1. 1. WuberizerStan BershadskiyTyler KnappeAlex Lazarhttps://github.com/ModusCreateOrg/web-audio-api
  2. 2. Inspiration
  3. 3. Tenori-On● Electronic Musical Instrument created in2005● Goal is to blend light and sound● Uses a 16 x 16 grid of LEDs as controls● Generates sound based on cell position
  4. 4. FeaturesWeb Audio Sound Creator● 16 x 16 sound synthesizer and pseudo-sequencer● Manipulate the frequency divisor, oscillatorwaveform, filters and global tempo● Record output into a WAV file● It also has a Reset button in case you wantto delete the whole song and to start over
  5. 5. ImplementationTechnology used:● Sencha Touch 2.2● SASS● Canvas● EaselJS● HTML5 Web Audio API● Recorder.js
  6. 6. Web Audio API● High level JavaScript API for processing andsynthesizing audio● Audio Routing Graph Paradigm○ Two end points that you can connect an arbitrarynumber 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 periodicwaveform○ AnalyserNode - use with Music Visualizers
  7. 7. Routing Graph UsedDestinationCompressorMaster GainOscillator BiquadFilter Oscillator Gain
  8. 8. Canvas● HTML Element that allows for a "resolution-dependent bitmap canvas which can beused 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, andmore.● Leverage EaselJS for abstraction of thecanvas and treat it as a stage
  9. 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. 10. Whats Next?● Implement saving state of grid locally andsharing it● Implement multiple active grid layers● Clean up the popping when turning on andoff oscillators at lower frequencies● Add in some other sounds, like drums● Make it work on the iPad :-)
  11. 11. DEMOhttps://dl.dropboxusercontent.com/u/74436/wuberizer/index.html
  12. 12. Browser Support?● Currently only supported by Chrome 26+● Some support for Safari, but not yet fullyimplemented
  13. 13. ● EaselJS○ http://www.createjs.com/#!/EaselJS● Recorder.js○ https://github.com/mattdiamond/RecorderjsReferences
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×