MIDI visualizer in WebGL | Hacker News Reader

MIDI visualizer in WebGL

github.com

78 pointsgourneau18 comments

Nice visualization. Looking at the keyboard from the side [1] reminds me of some youtube piano tutorials [2] where the keys drop from above (just like guitar hero).

I tried to drag & drop one of my MIDI files (as advised) but it didn't work.

A MIDI element is basically 3 values: height (pitch), length (duration), and velocity (intensity). The latter is the only one not implemented (the colors don't seem to mean anything in particular).

One interesting (but probably difficult to implement) feature would be to distinguish both left and right hands.

[1]: http://imgur.com/lYhLpHW

[2]: http://www.youtube.com/watch?v=5F7GNQAO4T4

Those falling-note videos use Synthesia (formerly known as Piano Hero): https://www.synthesiagame.com/.

The reason why it's missing velocity is because the MIDI.js implementation used is a simple sample player - it converts Soundfonts into a subset format. Basic features like pitch bends and vibrato are not possible from this format.

(With the newest revisions of Web Audio API it should now be possible to make a performant, fully-featured Soundfont implementation.)

"Sorry, this demo only supports Google Chrome"

The joys of web portability.

It looks like this is going to become a real problem soon. If I spoof my User-Agent, the demo works perfectly fine. Chrome is the new Made For Internet Explorer.

http://i.imgur.com/LsjVvlE.png

What string did you use? When I set mine to Chrome 25 (Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.68 Safari/537.22) I still get redirected. I don't use Mac enough to know what browser you're using from that screenshot.

    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5

What's worse, the error message appears to be displayed using a redirection to another page, so I can't use Firefox's inspector to try to make it work (Yes, I know the source is on GitHub, but to see a simple web demo? Not worth the effort of cloning or forking and re-hosting).

Author here.

The demo actually works in all modern browsers that support WebGL. The reason why I only allowed Chrome to visit was that it was the only browser that could run it smoothly.(At least on my machine at the time I developed this demo).

I have just removed the detection. Sorry for the inconvenience and hope you enjoy it.

For future reference, if one does detection (which is probably alright for proof-of-concepts using new features) just make it a dismissable warning that pops up, preferably with a screenshot or animation or short video so that people can get some idea of what it looks like/what they're supposed to see.

This is really, really great. Wow, kudos and hat-tip.

It just "stole" roundabout 15 minutes of my day - and if I were not working, I would just keep staring at the screen. Gladly my boss is not here right now, as he sits behind me - he would not like my, staring at a "piano -hero" screen.

Well done, great application.

Edit:

After using the scroll-wheel, I just realized, you could change the resolution. Having a whole song covering the screen is quite artsy. You could print every song this way, as an art project. Looks like DNA of every tune shown here. Especially the difference between the tunes is quite fascinating to me, if looked at in this way.

Wow, this helped me to realize that Rachmaninoff clearly was not human!

Reminds me of Rondo

http://www.fracturedsoftware.com/rondo/

This: http://qiao.github.com/euphony/#49

A/B loop would make this a fantastic learning tool.

piano hero, on the web, here we come!

In fact, the author is just a student.

nice! well done.

Reply on news.ycombinator.com