Pianoply


Pianoply is karaoke for piano. In your browser, free. It layers colorful graphics as well as sounds right on top of the original YouTube music videos for the songs you love. Users supply the MIDI "piano rolls" for songs, which they can create and edit right in the app. The app is very interactive, unlike all the zillions of "piano tutorials" on Youtube.


brain candy

Even if you don't have a piano (and have no interest in learning to play), you still might find the demo to be some interesting eye, ear and brain candy.

If you are somewhere you can take in some audio and video, preferably on an actual computer, please just click here for the demo.

(That link is big on purpose. Go ahead, click it. It's neat stuff. But remember that speedy internet, a bigger screen than a phone, and a decent processor are all good things. No guarantees if you are watching on a phone. )

On the other hand, if you'd like to watch a plain old video on YouTube that shows the product, you can watch the below video instead. It might be a better option if something about Pianoply isn't working right on your device. (Which is entirely possible...especially on phones or oldish/slowish computers)

And if you'd rather just read about it (until you can make it back to your computer or to somewhere you can crank up the volume), read on. Also, scroll down for a bunch of links to complete songs that you can play along with right now, if you have an electronic piano attached. (first you'll want to read the first couple items in the FAQ though).

FAQ...

(part 1, the essentials)

How do I play songs on Pianoply?

You simply connect a digital piano or MIDI controller to your computer, and click on any links to songs below. Currently only Chrome supports MIDI devices, but we understand that Firefox and Safari will have support soon.


Pianorolls, also known as MIDI sequences, are named for player piano rolls.

More songs will arrive soon, since users contribute the "pianorolls". It helps if you have colored stickers (or marks from washable markers) on the white keys of your piano, but it isn't necessary. The colors are red, orange, yellow, green, blue, purple, and pink, for C D E F G A B. There isn't a lot to learn to be able to play songs. Black keys are "striped" with the colors of the two adjacent white keys. That's pretty much it.

Anything else I need to know?

You should learn a few of the "keyboard shortcuts," which are handy for doing things like changing the instrument, toggling the piano display (photoreal vs. minimal), adjusting the volume of the video, adjusting the volume of the instrument, jumping around in a song, changing the speed, transposing, turning on and off note names (D# etc), and turning on and off "autoplay." Most of them are two letters (or a letter and a number), so for instance to jump to the 40% mark in the video, simply type "j" followed by "4". A menu is shown after the first letter, so to see all the "jump" commands, press "j" and you'll see this:

To adjust video volume, press "v" and a number. To adjust instrument volume, press "i" and a number. To change the instrument, press up and down arrow keys. To change the speed, press "s" and look at the menu choices. To toggle settings, press "t" and look at the options. One of the most important toggles is autoplay, which you turn on and off by pressing "t" then "a". If you want to see all the keyboard shortcuts, just press "k".

Please note that keyboard shortcuts aren't going to work on a tablet unless you have a bluetooth keyboard. The first version of Pianoply is optimized for a computer rather than a touch screen device. We're working on it and intend to have full touchscreen support in the not so distant future.

Full songs

that you can play right now...

FAQ...

(part 2, the rest)

How do I submit/share a pianoroll for a music video?

It's pretty straightforward, however, right now we are requiring that people host their own pianoroll files either on their own server, or by simply putting it in a pastebin. It's both to assure you that "you own your own data," and because we are being careful regarding copyright issues. Note that you can even do short pianorolls that are not hosted, by creating long urls that contain all the information, and that you can easily paste into an email. There is currently a private beta that you should probably join if you want a bit more help with the process. (email rjbrown at gmail if you want to be in the beta) It will soon get easier, and tips and techniques will be published. However, for the next month or two, I expect that most casual users will want to just play along with existing songs rather than create their own.

I found a piano tutorial on YouTube I'd like to bring into Pianoply. Is there any easy way to do that?

Actually there is. Some of our beta users have been using a powerful "tracer tool" to do that. It allows adjusting the geometry of the video and Pianoply's note display to match one another, and superimposing some colors to help out. You can run it at half or quarter speed and then play along, and can merge, edit and so on. Once you are done, you can and then bring it into the "real" video and synch it up perfectly. It sounds complicated but it's actually quite straightforward and quick. Join the beta if you want to do some of this before it is fully documented.

Here is a video showing where someone has traced Ariana Grande's Seven Rings, and has our notes superimposed and in synch with the ones in the tutorial.

This seems like it would be perfect for kids. Is that the idea?

Pianoply was inspired by my daughter Stella's love of music. She was less than 2 when I started the project and now she's nearly five. She loves music and she absolutely loves Pianoply. Whenever a new music video comes out that she likes, she's on my case to "put colors on it." Here is a video of her using Pianoply almost a year ago:

Stella and I often play duets, where she'll play the bass line and I'll play the melody. Even if we are just listening to music (or she is singing along), we usually prefer have a pianoroll playing along with it. I think she gets a lot out of seeing music presented that way, that will give her an advantage later if she pursues music seriously.

All that said, it doesn't mean Pianoply is "for" kids. Not at all. It's a ton of fun for adults too, whether they are new to piano, or are advanced (and possibly want to create pianorolls themselves). Pianoply is for anyone who loves music.

Are you really learning music when using Pianoply?

Absolutely. You just aren't learning traditional notation. But remember, a whole lot of modern music is composed using software (Ableton Live, Logic Pro, etc) that has a pianoroll display. Pianoroll display is simply more appropriate for computers than traditional notation, and is much more flexible and is better able to capture subtleties of timing. It's a perfectly valid way of representing music, even it seems to make som old-school piano teachers bristle.

How does copyright affect all of this?

It's complicated...

Of course, we are allowed to play music videos from YouTube on our web site, unless the content owner decides they don't want us to. Almost all music videos on YouTube can be embedded into a web site this way. We suspect that people who are actively engaged with the video, rather than just passively listening to the music, are more likely to click on the ads. The point is, they make money from videos being played Pianoply.

Pianorolls themselves are potentially subject to copyright, but we think they fall under fair use, as they certainly qualify as "transformative" under US law. The DMCA's "safe harbor" provision may come into play as well. Meanwhile the EU is now in the process of changing things around with Article 13 (a.k.a. the "meme killer"). We're going to see how things shake out.

Regardless, if you are an artist or record company that finds yourself getting angry at the idea of people having too much fun while consuming your music videos, even though you are making money from them, it is simple to block those videos from playing on our site.

Can YouTubers who do piano tutorials make money by putting their stuff on Pianoply?

We're going to try to figure something out so they can. Most of these YouTubers are already concerned about YouTube shutting them down due to copyright issues, especially if Article 13 goes through. We hope to provide them a viable alternative. We love their work and think it would shine here. I'm currently reaching out to all of them that I can, in hopes of bringing them into the beta and getting their ideas and input.

Can you send me colored stickers for my piano keys, for free?

We're planning on printing up a batch of very cool colored stickers. Send me an email (rjbrown at gmail) and promise me that you'll tell everyone you know about Pianoply, and I'll send you stickers as soon as we print them (US and Canada only). We'll also give you first dibs on a username when we are ready with that. Don't worry I won't sell your address or do anything evil. First come first serve....but I'll remove this from the page when it no longer applies.

Where do the instrument sounds come from?

An excellent open source library called WebAudio TinySynth. (everything else in Pianoply is "vanilla JavaScript" and built without 3rd party libraries)

How'd you do that "photo-real" piano keyboard where the keys change color? For that matter how'd you do those pianos right here that change colors?

I'm glad you noticed. The ones here are PNGs with "alpha transparency", and the color behind them is changing slowly (using css transitions to make it smooth). To prepare the image, I used this thing I built some years ago. For the one in the app, I spray painted an actual piano red, photographed it, did the same image processing technique to replace red with alpha transparency. There are SVG shapes behind it that are changing colors and opacity as needed. Here is a video I made while I was first exploring the technique for the piano keys.

Is Pianoply always going to be free?

That's the plan. It would be great to make some money off this (this wasn't slapped together in a weekend), but I think the best route to that is getting as many people as possible using it and spreading the word, gently suggesting that people buy new pianos, and taking a little cut if they do. I'm generally not big on advertising but this seems like a harmless model, especially if we aren't all pushy about it.

I want Pianoply to do X. Can you make it do it?

Maybe. But even better, Pianoply has a "mod page" where you can easily write snippets of JavaScript and run them on the site, save them, etc. I'd be happy to help you get started. The hope is that hackers will figure out cool things to do that I haven't thought of, and if they are good we can integrate them into the product somehow. Who knows maybe we can pay them for it, if we are able to make a buck ourselves. We'll see how things go...

Are you hiring? Open to contract work? Looking for investors? Looking for a piano company to sponsor you? Taking on apprentice coders? Lonely and just want to talk to someone?

My email address is below.