After seeing this video from Krafty Kuts of him playing the decimals of Pi mapped to the piano keys of A# with some left hand hamony thrown in, I wondered what it would sound like without the fanciness. Adding a baseline will help any tune immensely and human players don’t just robotically pound in notes – if they sound “right” at a different time they’ll try to make it fit. So I wrote a little javascript fiddle (woho, it’s raining puns!) that does just that, A# notes, 500ms apart, nothing else.

Here it is

It’d be interesting to try it with some other scale. Perhaps those fifths the jazz people keep mumbling something about, two of those should be ten so it’s being shoehorned into 2x pentatonic (since I’ve never heard of decatonic, though I’m sure there’s such a thing) and be more symmetrical. RIght? Not sure if the answer is “No, doofus” or “Yeah, doofus” and I’ve really wasted too much time on it already.

The piano samples were crosslinked from <a href=”http://pixelass.com/”>Gregor Adams</a> page in another project and marked as CC, which would make sense but I can’t find the linking party to see if it’s (Attribution) or no. So like if it is, you need to.. attribute.. accordingly. I.e. point out that that’s where they’re from if you reuse them. The code is whatever those were minus the attribution requirement. I’ll look it up later (or switch out the samples).


On the off chance that you wanted further elaborations, here:

“I like music theory and what are you talking about?”

You’ve caught me red handed! I have no idea. I know at most the very scratch basics of what this is supposed to be. I’m assuming pounding in random notes, because that’s all it is, sounds pretty ok so long as you stick to a traditional scale. Hence why they’re set where they are.

“I like javascript and what is this?”

I’ve been running into sites that jam everything into a single function that constructs it’s own stuff a lot last few years. Often in jQuery (don’t get all cocky about it – we can write plenty of opaque code in just plain javascript). It’s a bit of a hassle to follow, but I’m starting to understand the “why” – you can drop them into a random page and because all their variable are local to the original function, they’ll (at least in theory) coexist. So in the interest of getting better at it, I wrote this as one. Here’s a commented version to try to parse it apart some.

(function(pi){ //the lowest level that will be called with the digits of pi
 // Gererate an empty div element that will contain the progress along the digits later
    var d = document.createElement('div');
 // set it so it'll warp at end of screen.
    (function(s){s.maxWidth = '100%'; s.fontFamily = 'monospace';
        s.wordWrap = 'break-word'; s.wordBreak = true;})(d.style);

      // this will generate a set of functions that will play each note, when called withe their names and a place to add html elements to. That place will be document.body. Those two things will be in a and b.
    var k = (function(a,b){
      // Append the keeper thing - this is mostly here so I don't have to have another whole document.body written out.
          // "map" runs a function on each of the arry members and returns an array with the results. a here is the names of each note.
        return a.map(function(c) {
          // make and auto element without controls (play,pause,etc) and give an ogg sample to play when activated. Return a function that will reset the time and press play on it. Each name in the array k will now be a play-a-note function.
            var e = document.createElement('audio');
            e.id = c; e.preload = 'auto'; e.controls = '';
            e.innerHTML = "";
            return (function(){ e.currentTime=0;e.play(); });
       // immediately all the function we just made with the names (split at ' ' so it'a and array) and the body (to put the audio tags in.
    })("3As 3B 4C 4D 4E 4F 4G 4As 4B 5C".split(" "),document.body);
      // set an immediate timeout that get's an int from the Pi digits, finds the appropriate function in the array we made, and call it. A note plays. 
    setTimeout( function f(a){
           // if there's more digits left, set a timeout in .5s to call this function again, this time with the position moved forward.
          // slice Pi into before and after where we are. Stick that in the div from a step up, with a span inserted to make the unplayed poriton be greyed out.
      // the first timeout call, with a==0, so that it kicks off with the first '3' right away.
    }, 0, 0);
})( ".. digits of pi.."" ); // GO

It’s actually quite elegant, if not super portable.

“I like math and what is this?”

Nothing. It uses pi as a random number to play a scale that’s internally harmonic. Nothing to see here. I don’t calculate them on the fly because I’m being lazy, and 2000 notes (1000 sec, a bit over 15 minutes) should be plenty.

Leave a Reply