Recreating THX's Deep Note in JavaScript with the Web Audio API

For last year’s JSConf EU, co-organiser Malte got in touch with me to ask if I could replicate Deep Note, THX’s classic audio logo, to use as part of the introduction to the conference — “I’m assuming it should be really easy, but I may be completely wrong.” He probably meant for me to just use a synth, but seeing as it was for JSConf I felt I should try doing it in JavaScript.

The original sound was written in 1983 using C, and consisted of around 20,000 lines of code. Fortunately now that we have the Web Audio API and this excellent post on how to recreate Deep Note using SuperCollider, things are a bit easier.

I wanted the sound to be similar enough without being exact. Much like those adverts on TV that use music that sounds roughly like a popular song that they haven’t paid for the rights for. Here’s what I ended up with. (Chrome/Opera/Safari/Firefox only)

See the Pen THX Deep Note in JavaScript by Stuart Memo (@stuartmemo) on CodePen.

The sound is basically 30 square wave oscillators randomly emitting frequencies between 200-400Hz. The sound produced is then filtered to produce the sweeping effect you hear. Here’s a video of the sound being used to help launch the conference. Have a look at [my code](/thx-deep-note/thx-deep-note.js) to see how it was done, as well as [Batuhan Bozkurt’s](https://twitter.com/earslap) extremely [helpful post](http://www.earslap.com/instruction/recreating-the-thx-deep-note). My code uses the various helpers methods provided by [Theresa’s Sound World](http://theresassoundworld.com/).