Theremin.js a music creation and visualization app built entirely using JavaScript, HTML, and CSS.
Users create sound using a simple X and Y-axis input, similar to a real theremin. This was achieved by translating the mouse's X-Y coordinates on the canvas into an appropriate volume and frequency value for a Web Audio API oscillatorNode.
Users have the ability to switch between three common types of audio waves; sine, square, triangle and sawtooth. Each button has a click listener which, when fired, assigns the appropriate wave shape to the variable waveShape, which is assigned to the oscillatorNode once created.
In addition to having the ability to control the wave shape, users have a variety of sounds effects they are able to apply to the theremin
Each input listens for change, and either reassigns the appropriate value (in the case of sliders) or toggles the effect to be either on or off (in the case of the switches).
The visualization component of app was implemented again using Web Audio API and also Canvas.
I implemented a Web Audio ScriptProcessorNode, which allowed me to continuously call the helper method drawSpectrum while the oscillator is activated by the user. Using Canvas, drawSpectrum iterates through an array of frequencies and draws a corresponding bar onto the canvas for the visualization.