Binary Piano

I had first built this project, as a standalone page on my own website, and then eventually on it’s own useless url at binarypiano.com … so I guess I can say its a project that has lived in many forms. In this version, we’ve updated to our neon look, and I’ve looked at a few new features. But really just used it as a way to mess around a little with a visualizer, and to learn a little more about Tone.js.

I had first seen this idea a video by Alfred Kedhammar, and honestly their implementation is a whole lot nicer. I should perhaps try to loop around and use the part of tonejs that samples actual notes, because that piano sound really adds a ton of depth, and the subtle violins in the background… something for me to look at!

The essence of the project is simple, a number counts up and is shown in binary, and each binary piece when it goes from 0 to 1 plays a note. As the numbers get more to the left, the notes sustain a little longer, to add a bit of depth in. The result is a pretty fun sound that loops but slowly evolves as the number counts up.

Tech/Algos

  • Tone.js PolySynth with some wrangling for the note triggering and release times
  • Shareable URL state so you can send someone your note configuration
  • Simple HTML5 Audio visualizer with bar and circular modes, very simplistic. I felt like I might make these a staple across all experiments, but it instantly felt a little unneccesary, so will remain simple for now.

Changes & Updates

  • Relesed as first experiment on musical.toys