

MIDI visualizer in WebGL  - gourneau
https://github.com/qiao/euphony

======
bbx
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>

~~~
chipsy
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.)

------
pjmlp
"Sorry, this demo only supports Google Chrome"

The joys of web portability.

~~~
xqunix
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.

~~~
dbaupp
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.

------
sdoering
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.

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

------
adamzegelin
Reminds me of Rondo

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

------
lexy0202
This: <http://qiao.github.com/euphony/#49>

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

~~~
chii
piano hero, on the web, here we come!

------
haosdent
In fact, the author is just a student.

------
rpwverheij
nice! well done.

