6 ms·

MIDI visualizer in WebGL

78 points by gourneau 14y ago

haosdent 14y ago
In fact, the author is just a student.
bbx 14y ago
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 http://imgur.com/lYhLpHW [2]: http://www.youtube.com/watch?v=5F7GNQAO4T4 http://www.youtube.com/watch?v=5F7GNQAO4T4
- chipsy 14y ago
  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.)
- roryokane 14y ago
  Those falling-note videos use Synthesia (formerly known as Piano Hero): https://www.synthesiagame.com/ https://www.synthesiagame.com/.
adamzegelin 14y ago
Reminds me of Rondo http://www.fracturedsoftware.com/rondo/ http://www.fracturedsoftware.com/rondo/
deleted 14y ago
[deleted]
pjmlp 14y ago
"Sorry, this demo only supports Google Chrome" The joys of web portability.
- nwh 14y ago
  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 http://i.imgur.com/LsjVvlE.png
  - nitrogen 14y ago
    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.
    - nwh 14y ago
      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
- nitrogen 14y ago
  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).
- xqunix 14y ago
  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.
rpwverheij 14y ago
nice! well done.
mhuffman 14y ago
Wow, this helped me to realize that Rachmaninoff clearly was not human!
lexy0202 14y ago
This: http://qiao.github.com/euphony/#49 http://qiao.github.com/euphony/#49
jasonkostempski 14y ago
A/B loop would make this a fantastic learning tool.
- chii 14y ago
  piano hero, on the web, here we come!
sdoering 14y ago
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.

78 points by gourneau 14y ago

In fact, the author is just a student.

bbx 14y ago

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 http://imgur.com/lYhLpHW [2]: http://www.youtube.com/watch?v=5F7GNQAO4T4 http://www.youtube.com/watch?v=5F7GNQAO4T4

chipsy 14y ago
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.)
roryokane 14y ago
Those falling-note videos use Synthesia (formerly known as Piano Hero): https://www.synthesiagame.com/ https://www.synthesiagame.com/.

adamzegelin 14y ago

Reminds me of Rondo http://www.fracturedsoftware.com/rondo/ http://www.fracturedsoftware.com/rondo/

deleted 14y ago

[deleted]

pjmlp 14y ago

"Sorry, this demo only supports Google Chrome" The joys of web portability.

nwh 14y ago
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 http://i.imgur.com/LsjVvlE.png
- nitrogen 14y ago
  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.
  - nwh 14y ago
    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
nitrogen 14y ago
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).
xqunix 14y ago
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.

rpwverheij 14y ago

nice! well done.

mhuffman 14y ago

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

lexy0202 14y ago

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

jasonkostempski 14y ago

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

chii 14y ago
piano hero, on the web, here we come!

sdoering 14y ago

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.