Putting It All Together

In the preceding lessons, you learned how to implement the basic features of a synthesizer using JavaScript. Now, it's time to put it all together.

Download the "synthesizerTODO.html" and "synthesizerTODO.js" files from the "Downloads" section of this page. You'll see that each contains a number of comments with tasks marked "TODO". Using code from the preceding lessons, you should figure out how to get the missing elements working.

When you are done, check your work against the "synthesizer.html" and "synthesizer.js" files. These will show one possible way to implement the missing features.

Finally, challenge yourself by implementing even more additional features, as described in the self-study section.

Good luck!

Downloads

Download the following files by right-clicking the links, and then selecting "Save Link As...". Try not to look at the working versions unless you get really stuck!

Self-Study

  1. Add octave control, as described in the Self-Study section of the controllers lesson.
  2. Add a radio button that will let the user change the modulator from a vibrato to a tremolo.
  3. Incorporate the user-customizable envelope code from adsr.js. Figure out a way to control separate attack and release actions for each note.
  4. Look at the jQuery .mousemove event. This will give you an additional pair of continuous values. Map the X/Y coordinates of the mouse to something fun, like filter cutoff/Q or vibrato speed/amount.

Additional Resources