Home

Build a Theremin with the Web Audio API

  • JavaScript
  • Tutorial
  • Web Audio API
  • Instrument
  • Theremin

This month's Web Designer jumps into the wonderful world of the Web Audio API. Who knew your browser could also be a musical instrument?

The Web Audio API is an immensely powerful audio creation and manipulation tool. Not only can you manipulate sound files for use in games and applications, but it's also possible to create sounds too.

Audio passes through a set of nodes and ends up at a destination (usually the device speakers). What those nodes are and what they do is up to you. So long as there's a source and a destination anything goes.

In this tutorial, we're honouring sci-fi's wonder instrument - the Theremin. It's very, very retro, but also serves as a simple introduction to the world of the Web Audio API. By generating a sine wave and manipulating it, we can create all sorts of notes.

This is the finished article. Give it a play, have a fiddle with how it works.

If you want to learn more about the Web Audio API and how these various bits and pieces fit together, pick up the latest Web Designer and follow along!