MIDI Visualizer / Player
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
midi
soundfont
.gitignore
LICENSE
README.md
index.html

README.md

Raindrop

MIDI Visualizer / Player / Time Waster

Ever since I got into coding, I was fascinated by music visualization programs such as Cthugha, G-Force, and MilkDrop. This project is at best a small homage to those programs (and the many more that have come and gone since). I decided to use MIDI files because:

  • having access to the events/messages would allow me to create visualizations directly tied to notes, pitch, velocity, etc...
  • representing music as set of instructions reminded me of playing off sheet music long ago in grade school
  • it was easier than performing a frequency analysis ;)

The result is a much simpler visualizer than most (I'm a web developer, not a graphics programmer), but one that I hope feels more closely tied to the music.

Instructions

Move your mouse around. Hold your mouse down. Press any/all keys on your keyboard (space will randomize some effects). Pretend like you are playing a piano. Have fun :)

Song Credits

  • Mellon Collie and the Infinite Sadness - The Smashing Pumpkins (via midiworld.com)
  • Flight of the Bumblebee - Nikolai Rimsky-Korsakov (via 8notes.com)
  • Greensleeves - Unknown Composer (via tripod.com)
  • Angel's Fear - Hiroki Kikuta (via khinsider.com)
  • The Legend of Zelda - Title Screen - Koji Kondo (via vgmusic.com)
  • Mega Man 3 - Title Screen - Yasuaki Fujita (via khinsider.com)

Theme Credits

Instrument Support

By default we only include and use one instrument (acoustic grand piano) for all channels. For complete instrument support, download the MIDI.js Soundfonts from the link above, and change line 1 of js/app.js to:

var USE_FULL_SOUNDFONT_LIBRARY = true,
License:

MIT. Free for any reason ✌(-‿-)✌

This exists because these exist: