{"id":771,"date":"2014-08-22T15:11:58","date_gmt":"2014-08-22T19:11:58","guid":{"rendered":"https:\/\/blog.splice.com\/?p=771"},"modified":"2025-07-21T10:47:07","modified_gmt":"2025-07-21T14:47:07","slug":"wire-up-a-synth-with-the-web-audio-api","status":"publish","type":"post","link":"https:\/\/splice.com\/blog\/wire-up-a-synth-with-the-web-audio-api\/","title":{"rendered":"Wire Up a Synth with the Web Audio API"},"content":{"rendered":"

In my last post<\/a>, I wrote about rendering graphics programmatically on the web. This week, I\u2019d like to do the same for audio. Instead of dropping in GIFs or MP3s, the creative tinkerer can generate sound and image using some elemental yet powerful syntaxes, right here in the browser you\u2019re reading in. (Scroll down for a live demo!)<\/p>\n

The synth geeks on Splice know what I\u2019m talking about. Many of the keyboards, basslines, and leads we know and love are produced in the same way they were a half century ago on analog electronics: The performer sets controls and plays into a graph of nodes which generate, process, shape, or recombine audio signals according to specific mathematical functions. The most sophisticated software synths earn notoriety, like Massive<\/a>, our current #1 synth on Splice, and the arguable backbone of US dubstep.<\/p>\n

The totally bananas part is that, via the Web Audio API<\/a>, web browsers are beginning to support this functionality normally reserved for native plugins. It\u2019s still experimental (Sorry, Internet Explorer and Android), and a bit rough around the edges, but exciting nonetheless.<\/p>\n

Of the libraries which have sprouted up around this functionality (including Flocking<\/a> and Audiolet<\/a>), I\u2019ve chosen to highlight timbre.js<\/a> in this post, which does an excellent job of abstracting away the wiring up of audio nodes in an elegant DSL.<\/p>\n

To explain, here\u2019s a rough graph of my simple, kinda organic-sounding synth patch:<\/p>\n

\"timbre-graph\"<\/center>Because there are no crosswise interdependencies between nodes, timbre.js lets me describe all this in a set of nested JavaScript function calls:<\/p>\n
var synth = T(\r\n  \"perc\", {a: 100, r: 400},\r\n  T(\"sin\", {freq: freqSlide, mul: 0.25}),\r\n  T(\"sin\", {freq: freqSlide * 1.01, mul: 0.05, phase: Math.PI * 0.25}),\r\n  T(\"eq\", {lpf: [100, 0.0, -48.0]},\r\n    T(\"sin\", {freq: freqSlide * 2, mul: 0.25})\r\n  ),\r\n  T(\"perc\", {r: 10},\r\n    T(\"saw\", {freq: freqSlide * 4, mul: 0.05})\r\n  ),\r\n  T(\"perc\", {a: 100, r: 100},\r\n    T(\"noise\", {mul:0.0})\r\n  )\r\n)<\/code><\/pre>\n
The first T()<\/code> in the code snippet corresponds to the rightmost node in the schematic. The genius of timbre.js is to allow splats<\/em> (unspecified numbers of arguments) of other T()<\/code>s to all be summed together as audio signals. So when you use the elemental T()<\/code> function, the first arguments describe that node\u2014and all subsequent arguments are summed and routed right through it. This allows for the expression of complex synths in very short definitions.<\/p>\n
You can hear my amateur sound design here, tuned to a just-intoned<\/a> major scale:<\/p>\n