Experimenting with binaural beats and WebGL visualizations

September 2018

TLDR: This is an experiment of sound editing with binaural beats, alongside Winamp’s Milkdrop WebGL visualizations. I recommend watching it in full screen with good headphones.

During the summer, my work slows down a bit. People take vacations, and that’s cool. The winter is pretty harsh in Quebec. So enjoying the summer while it lasts is very important. This slow-down allows me to take some vacations, but I often end up working on a side project. This year, I thought I should take this time to get better at sound editing and basic music creation. I have been gradually learning the ins and outs of sound editing in the past years. Also, I had an Arturia Keylab Keyboard collecting dust in my closet since I purchased it two years ago. I would take this free time to learn to get something out of it.

Binaural beats

I played around with the keyboard, jumped from one Youtube tutorial to another, and somehow (you know how this goes) ended up looking at binaural beats videos.

I had forgotten about those.

I have been fascinated by binaural beats for quite some time. If you’ve never heard of it, here’s Wikipedia definition:

A binaural beat is an auditory illusion perceived when two different pure-tone sine waves, both with frequencies lower than 1500 Hz, with less than a 40 Hz difference between them, are presented to a listener dichotically (one through each ear).

For example, if a 530 Hz pure tone is presented to a subject’s right ear, while a 520 Hz pure tone is presented to the subject’s left ear, the listener will perceive the auditory illusion of a third tone, in addition to the two pure-tones presented to each ear. The third sound is called a binaural beat, and in this example would have a perceived pitch correlating to a frequency of 10 Hz, that being the difference between the 530 Hz and 520 Hz pure tones presented to each ear.

Some think listening to them can be a great tool to improve meditation and reduce stress (Medical News Today). Others consider it a safe “digital drug” (Vice had a fun piece on the subject). Some also think the idea is overrated.

I personnally think they’re quite interesting. I don’t attribute much grandiose virtues to them, or believe that they are akin to “real” psychedelics, but most of them have a cool hypnotic effect on me.

I did listen to the infamous “Gates of Hades” a couple of years ago and got pretty freaked out, as many to other people seem to be. I won’t go into details about it here, but I recommend googling the thing if you want to learn more.

Anyways, a couple of hours later, after experimenting with layering binaural beats alongside other various sounds as exploration, I was pretty happy with the creepy song I’d made, and thought it would be cool to make some visuals to go with it.

Visualizations

I think this is where the cool part comes in. It’s pretty hard to generate something really interesting with purely parametric settings in After Effects. And, if you get to something that is both parametric and visually impressive, it will usually take a lot of time and power to render.

That’s where comes into play Milkdrop, Winamp’s music visualizer, and Butterchurn, its WebGL implementation.

I’ve spent a lot of time staring at those Winamp visualizations when I was a teenager and, hem… more prone to be staring at hypnotic images. So learning they were now available in the browser was exciting to say the least.

I worked with the code to build a quick personal tool on my end. I have a couple of ideas of how I could make it better, but I’ll write more about it if that happens. If you want to play around with it, you can: translit.rocks. It’s a very rough implementation and has only been tested on Chrome v68 on macOS.

This might just remain a fun exploration, or it might move to something else if I can find the time to push it further. Anyhow, this was a pretty cool thing to play around with, and I hope it can allow you to experiment with adding a visual layer to sounds you like.