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