Show HN: Play music by typing | Hacker News Reader

Show HN: Play music by typing

benzguo.com

119 pointsbenzguo62 comments

I created a music auto-player since I was too lazy to play your guy's songs by myself. Paste this in the console.

  // SETTINGS
  var input = "rsa ecde srgu yhgr bv rsa ecde srgu yhgr bv hybtg ser erv";
  input += " hybtg iii r hybtg ser erv tvr rrr rvgres rrr rvg rrr rvgres ";
  input += "ggg rgh grs sxebbe cuuuhbgres grs sxebbe cbbbgvrsai";
  var TIME_INTERVAL = 300;

  // Add jquery
  var script = document.createElement('script');
  script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
  script.type = 'text/javascript';
  document.getElementsByTagName('head')[0].appendChild(script);

  function play () {
    // Sound array setup
    var soundArray = [];
    var down = $.Event("keydown");
    var up = $.Event("keyup");
    input = '  ' + input; // hack
    for (var i = 0; i < input.length; ++i) {
      soundArray.push(input.toUpperCase().charCodeAt(i));
    }

    // Start sound
    var index = 0;
    function playSound () {
      up.which = soundArray[index];
      $("body").trigger(up);
      ++index;

      down.which = soundArray[index];
      $("body").trigger(down);
      // // is there another?
      if (index < soundArray.length) {
        setTimeout(playSound, TIME_INTERVAL);
      }
    }
    playSound();
  }

  (function loadjQuery () {
    if (typeof jQuery === 'undefined') {
      setTimeout(loadjQuery, 100);
    } else {
      play();
    }
  })();

Huh, this doesn't seem to handle commas or semicolons at all. I can't immediately see why, since string.toUpperCase() maps "," to "," and ";" to ";", as it should. And switching input to

"uyvyu,pl,ynuuupl,kmk,,uyvuyvyu,pl,ynuuupl,kmk,,uyvppp;[[;plp;;;pl,kmk,ynuu,,,kmmml;pl,,kuu,lp;[,lp;l,"

completely breaks it about half way through.

Anyway, cool hack!

That's because the keydown event uses keyCode instead of charCode, and the two don't always match. Try typing Shift+U and then '[' on this page to see what I mean: http://unixpapa.com/js/testkey.html.

Since KeyboardJS is already loaded via requirejs, we can require it and then use it to get the keyCode for each character in the for loop.

    var KeyboardJS = require('lib/keyboard');

    [...]

    for (var i = 0; i < input.length; ++i) {
      var code = KeyboardJS.key.code(input.charAt(i));
      if (code) {
        soundArray.push(code);
      } else {
        soundArray.push(32);
      }
    }

Here's an updated version of the script, using your example as input: https://gist.github.com/peterjmag/489364ca58330c348c33

I particularly like input = "qwdtytdwqertytreqxctntcxzxctbtvwqwdtytdwqertytreqxctntcxzxctbtvwqwdtytdwqertytreqxctntcxzxctbtvwqwdtytdwqertytreqxctntcxzxctbtvwqwdtytdwqertytreqxctntcxzxctbtvw"

It's a me, Mario.

In possibly the geekiest thing I've ever posted to the Internet...Here's the Super Mario Bros. theme!

rsa ecde srgu yhgr bv rsa ecde srgu yhgr bv hybtg ser erv hybtg iii r hybtg ser erv tvr rrr rvgres rrr rvg rrr rvgres ggg rgh grs sxebbe cuuuhbgres grs sxebbe cbbbgvrsai

It'd be cool to integrate my site http://www.soundslice.com/ into this.

I think that the 'bv's following 'yhgr' might be 'vc' instead -- sounds closer to me. I gotta say, I really like this layout, even if it's slightly less than intuitive for me.

yup, vc not bv

Great idea! This is tedious to work out, but I think I made a couple of improvements:

rsa ecde sghu bhg rvc (play this line twice)

hybtg xer erv hybtg iii hybtg xer erv tvr

rrr rvgres rrr rvg rrr rvgres ggg rgh

grs sxebbe cuuuhbgres grs sxebbe cbbbgvrsai

And a couple of additions:

rsa ece xdx szs

Play this one fast:

srghil;l xrtnio/o dvbj,. '''i (I couldn't find a high enough A)

And an attempt at the underworld theme, although this one was harder to pick out (and hard to type up to tempo).

rieudj rieudj b.v,to b.v,to tvfr tvxsf rybgjun tcdex

Very cool!

whoa, soundslice is cool! would love to talk about integration :)

Well done! sxebbb; so many memories!

The beginning of Game of Thrones theme:

    g e rvg e rvc
    v s rcv s rce
    (bhu g bhu g bhu g)

I love the idea of having a layout where all patterns are movable. Going diagonally up-right gives you whole tone steps, diagonally down-right gives you semitone steps. An octave is QT, a major triad is QSD, a minor triad is QWD, a major scale is QZSXDRVT or AWXECFTG or ASEDRVGB. I could pick this up right away, in some ways it's easier than the piano, which I've played a lot. I really wish there was touch response, but computer keyboards don't support it.

The behavior of cmd as the pedal is a little weird. When you release the pedal, the sound should stop. Maybe it's just a Mac bug, though.

The top row seems to be an octave higher than it should be, that interferes with moveability. Though I understand you probably wanted to expand the range.

Interesting layout. Horizontal rows are diminished triads, so it takes a minute to figure out the pattern for your standard maj/min chords. It's very counterintuitive for someone familiar with piano and guitar (or at least me), but that can be a good thing.

Well, the cool thing is that the layout means that all chords are completely movable. Take the pattern for a C major chord: QSD. If you shift over one key for each finger, you get an F# major chord: EFG. You can move that same finger pattern anywhere and always get a major chord, unlike, say, a piano or guitar (assuming you're playing in standard).

The idea of fully movable chords was drilled into my head by the design of the Ableton Push, and I've always loved it, though I think that's far more intuitive than this.

Yeah, after 10 minutes of playing with it chords are starting to feel intuitive. You can do a lot of basic chording once you memorize the major and minor inversions.

I fully agree. This is one aspect of the common keyboard layout that makes me sad: you have to learn many different patterns for every key. With this you only need to learn functional patterns (major, minor, etc.) and suddenly you know them for all keys. Other layouts have been attempted (see the janko layout), but they never caught on. I wonder if the mobility of accordions is one reason they've been able to have more variation.

How does the ableton push solve this problem? Looking at a video it almost felt like they were switching modes for a scale (almost like a harp does with its pedals). I'm probably off here, but I couldn't quickly find docs on how it worked.

The Ableton Push has several different configurations. I think you can use patterns based on any scale you want (including chromatic). Jordan Rudess did a little video series exploring the push: https://www.youtube.com/watch?v=cz39lPgqfhE

This application is called "Bayan", it is the name of the russian accordion that is using this exact layout: https://en.wikipedia.org/wiki/Bayan_%28accordion%29

Awesome. The first thing I did was run my finger across the qwerty row from left to right, which immediately made me think of Toccata and Fugue, prompting me to pick out this excerpt:

    8[8 [;plol mum yhtg cec esaqa qwertyuiopluyn
    tgytgytgytgy huyhuyhuyhuy 4iu4iu4iu4

Transposed down a half step to D-flat minor to better fit this thing's range. It's not a perfect transcription by any means (the arpeggio suffers from limited polyphony, for one), but it's pretty cool that it was so easy to get this far!

EAR TO EAR GRIN

More music please from the talented among us!

I've tried things like this before, but this is great.

I knew playing all those typing race games would come in handy one day!

I wrote a Python script to convert note names into keys:

https://gist.github.com/aclissold/c6dcdee3838f23cee7cd

…But I stopped caring when I got to filling in the dictionary of notes, so if somebody else wants to finish it, be my guest! ;]

Is nice that you can open the JavaScript console (F12) and it shows the name of the notes (along the musical octave).

Is a shame there are some chords that you can't play (chord: pressing notes at the same time), such as "yup". But I think is a hardware limitation rather than a bug in the JavaScript.

It depends on your keyboard. I can play "yup". What happens is keyboard ghosting: http://www.microsoft.com/appliedsciences/antighostingexplain...

It seem to support any 4 keys at a time for me (when I hit a fifth key, the first tone drops out), though I didn't look hard for exceptions.

A patriotic tune

uyvyu,pl,ynuuupl,kmk,,uyvuyvyu,pl,ynuuupl,kmk,,uyvppp;[[;plp;;;pl,kmk,ynuu,,,kmmml;pl,,kuu,lp;[,lp;l,

Does anybody know if a desktop equivalent version of this exist?

I would love to hear nonsensical boops as I code.

A quick heads-up: I left the page open to play with it later and about an hour and a half afterwards, it apparently started blaring quite alarming noise out of nowhere. Didn't hear it myself but it freaked out the unlucky person in the room.

This may be an easy question for others, but not for me- how does it load the app code? When I view the source, it only shows the loading of google analytics and require.js, but the console/Debugger shows 10 .js files?! Thanks.

    <script data-main="js/app" src="js/require.js"></script>

That data-main attribute is a magic signal to require.js to load js/app.js. From there, app.js tells it what else to load.

The layout doesn't make much sense to me.

https://www.image-line.com/support/FLHelp/html/img_glob/qwer...

Interestingly, mashing random keys of a single row makes an acceptable melody. Do accordeon players aldo randomly mash keys? :D

Also, perfect thing to test my N-key rollover keyboard (which only goes to 6 due to USB limitations...)!

Nice! I noticed pressing alt+key will hold the note, but you might want to change that to shift+key since 'w','q','t' and 'n' won't work (I got a little carried away).

Here is another project that also uses this keyboard layout, with a marimba sound:

http://michaelscottnelson.com/app/Charmonika2/

Song Of Storms from Zelda: Ocarina Of Time sounds awesome on here: 347 347 J8J8JYT T34FT T34FD

Hmm that doesn't sound like Song of Storms...I ended up with this:

236 236 ; 7;7;oi ibnji ibnjh 236 236 ; 7;7;oi ibnji ib

Maybe the keyboard makes different sounds sometimes? Or maybe I'm off by a key...

Are you playing it on the submitted link or the player in the parent comment? I believe the submitted post is off by a key.

Ah, I was playing on the submitted link, not the parent of this comment. My bad. Well I guess we have TWO ways to play Song of Storms now :D

I remember a few years back there was a site similar to this idea and you could actually share! I think you could add an option to append to fragment #

edit: is this open source such that people can contribute?

Yes please! https://github.com/benzguo/bayan fair warning, I'm a total js noob

I love this! My favorite part was 'discovering' my own 'cords'. So far, my ear prefers AEF, AWF, ECG, AEG, and AFY.

Also, you can make a key stay down by holding down Control (Command on a Mac)

Hmm, Control does nothing for me.

Be careful as to not press Ctrl/Cmd+W though!

Someone made a native version of this a few years back. Had a lot of fun playing with it for a week in 2009.

http://keybored.wikidot.com/

I am too lazy to use this site without some kind of interactive help.

I would like to same some kind of feedback, like piano diodes that get on and of for you to follow a tune or tell you when you get wrong.

I made something like this recently http://www.gravitypersists.com/musicspiral

Someone should make a keyboard that assigns nice sounding intervals to the most common digrams/trigrams so that typing normal text produces better music.

Well, if you like the general sound of playing the home row in this layout, then simply remapping this thing for Dvorak might get you somewhat far toward that goal since the home row actually contains the vowels and common consonants.

Very fun. This is a nice range, very different from the keyboards included in music software. I wish I could figure out which button is which note.

You can open the JavaScript console (F12) and it shows the name of the notes (along the musical octave).

Nice to have that showing on the keyboard screen, also a way to switch keyboard layouts.

I used to play bayan, so I figured out the layout even before I saw the url. The orientation of keyboard makes it a bit hard to play though.

While we're all posting transcriptions of songs: Take the A Train.

d h dthc r rfvh cdey bx e d hdthc r rfvh rrthxrthr rtherthr c d h dthc r rfvh cdey bx

I created a similar thing a few years ago: http://kreolmusic.com

I found the song from Donkey Kong arcade! Or at least a close approximation.

q s drd q s drd q s drd q s drd q s drd ...

qwdtytdw qertytre qxctntcx zxctbtvwq

The scales produced by typing along one row reminded me of the castle theme from Super Mario World. If my javascript-foo was greater, I would write a function that types this, but alas.

>qwdtytdw qertytre qxctntcx zxctbtvwq

This is the best part of the app! A simple string is simplified music notation for this keyboard, and if you are a touch typist, that means you can play anything on the fly!

Reminds me of a program from the demo disk that came with my C64.

Song of time: ib n ib n io,jnji b th b

this thing is so slow for me on FF that it skips half of the notes I hit.. :(

i LOVE this. i want to hear this everytime I write code.

Reply on news.ycombinator.com