web audio app preso

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

Post on 22-Oct-2014

1.066 views

Category:

Documents


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Web audio app preso

WuberizerStan Bershadskiy

Tyler KnappeAlex Lazar

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

Page 2: Web audio app preso

Inspiration

Page 3: Web audio app preso

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

Page 4: Web audio app preso

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

Page 5: Web audio app preso

Implementation

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

Page 6: Web audio app preso

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

Page 7: Web audio app preso

Routing Graph Used

Destination

Compressor

Master GainOscillator BiquadFilter Oscillator Gain

Page 8: Web audio app preso

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

Page 9: Web audio app preso

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

Page 10: Web audio app preso

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

Page 11: Web audio app preso

DEMOhttps://dl.dropboxusercontent.

com/u/74436/wuberizer/index.html

Page 12: Web audio app preso

Browser Support?

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

implemented

Page 13: Web audio app preso

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

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

References