MIDI visualizer in WebGL(github.com)
github.com
MIDI visualizer in WebGL
https://github.com/qiao/euphony
10 comments
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.)
(With the newest revisions of Web Audio API it should now be possible to make a performant, fully-featured Soundfont implementation.)
Those falling-note videos use Synthesia (formerly known as Piano Hero): https://www.synthesiagame.com/.
"Sorry, this demo only supports Google Chrome"
The joys of web portability.
The joys of web portability.
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.
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.
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).
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
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.5This 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.
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/
http://www.fracturedsoftware.com/rondo/
[deleted]
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.
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