MIDI.js (on github) ties together, and builds upon frameworks that bring MIDI generation to the browser. Combine MIDI.js with jasmid to create a web-radio MIDI stream similar to this demo… or with Three.js, Sparks.js, or GLSL to create Audio/visual experiments. Piano/guitar simulations, Drum machines, MIDI recording, and all kinds of certified funkitude are within your grasps (with a little elbow grease)!
Google Chrome is recommended for best listening experience—it has timing perfection. Firefox and Safari can both perform a bit more like the piano has been drinking, arrr.
Carpe beerum, and commandeer yer own copy!
The Jack the Tunafish artwork was graciously provided by Boni Deal; http://bonideal.com/
View a live demo of the github project; http://mudcu.be/midi-js/
Please report issues and bugs on Github or here, many thanks 
Apr 13, 2012 @ 20:47:56
Hi Michael! I downloaded the files to make some tests, but It didn’t work, even the “minimal.html”. Any tip?
It’s stopping at the line 79 of “./js/MIDI.loadPlugin.js”.
MIDI.Soundfont = JSON.parse(response.responseText);
Nice job with the Color Piano! It is awesome!! Greetings from Brazil!
Apr 14, 2012 @ 05:02:43
@brunoao86 Hmm, not sure—I’ve updated the codebase though to the newest version that Color Piano is running on. Could you give it a test, and see whether that works? btws, did the demo work for you on http://mudcu.be/piano/?
Apr 14, 2012 @ 05:04:03
@brunoao86
Hmm, not sure why that might be—I’ve updated the codebase though to the newest version that Color Piano is running on. Could you give it a test, and see whether that works? btws, did the demo work for you on http://mudcu.be/piano/ or have you only tried the Chrome Extension?
Thanks for enjoying
Apr 14, 2012 @ 16:10:30
@mud Both worked fine! I tried the demo work on http://mudcu.be/piano/ and I liked so much that I had to download the Chrome Extension! I downloaded the files on https://github.com/mudx/MIDI.js and I tried to make some tests, but It doesn’t worked, even the simple tests that I just tried to play a note (using the minimal.html).
Apr 14, 2012 @ 18:32:22
@brunoao86 Oki, and you tried the latest version on Github too, with the same issues? (the one that was pushed earlier today)
Apr 14, 2012 @ 19:46:11
@mud I just tried and I had the same problem. =/
MIDI.Soundfont = JSON.parse(response.responseText); (./js/MIDI.loadPlugin.js – Line 79)
I checked the value of ”response.responseText” and it was “undefined”, is it normal?
I’m using Chromium.
17.0.963.79 (Developer Build 125985 Linux) Built on Ubuntu 10.10, running on LinuxMint 10
Apr 20, 2012 @ 17:39:41
@brunoao86 Nope… it’s not normal. But, it sounds like the JSON was not read correctly. I wish that I could use your computer, and figure out the problem. You might try clearing your computers cache (as even if you download the new soundfont, it could be cached). Another way to track the issue down would be to cut out all the lines from the JSON, except for one note (and remember to remove the comma at the end of the line).
In my next update, I’ll give the option to use the non-base64 encoded soundfont. The reason why it defaults to base64 soundfonts right now, is that browsers make multiple requests for the same audio file (for no reason) when it’s not encoded which can hog a lot of bandwidth…
Jun 24, 2012 @ 09:47:12
Hi Micheal, many thanks
i take inspiration it for my project. By the way i’ve tried to create my js midi file by your soundfont script in sh, but your script give me an error with base64 cause it can’t find out the -0 or -o (i don’t remember) option. So i adjusted it by exporting the file in base 64 with option -w 0 and with javascript i’ve replaced special character that give me errors. How do you generate the js file with representation of music in base64?
Jun 26, 2012 @ 01:04:18
@joxer92 Hi Joxer, thanks for connecting, I’m glad you’re enjoying the software
I’m not entirely sure what you’re asking in your question, are you asking how the visualization of the music is created?
Jun 26, 2012 @ 17:46:58
@mud I’ve tried to create my soundfont-ogg.js with your sh script, to incorporate soundfont in sh but it failed. I’ve noticied that you use the -0 option with base64, it fault the command cause it’ doesn’t exist. So i’ve replaced it with -w0 and it seems to work. Then in the Ajax request i’ve replaced the newline introduced by base64 to run it. Without this fix your script doesn’t work. Sorry for my english, i’m Italian.
Jun 30, 2012 @ 04:30:26
@joxer92 Apologies for the long delay in response, I’ve been away from my computer at a conference. Thank you for reporting this, I’m going to take a look into this as soon as possible! Did you have any other troubles while using MIDI.js?
Jun 30, 2012 @ 04:56:37
@joxer92 I think the package referenced in my documentation isn’t the correct one… either way, I’m updating the codebase to use a node.js base64 encoded instead of the recommended one in the documentation… this makes it easier to install
Jul 01, 2012 @ 15:02:28
@mud Oh i see i didn’t try with node.js, i don’t know how to use it. I’ve troubles with some midi, the note aren’t rendered well. Also do you know some packages in python, ruby or php that permits to create midi file readable by your library?
Jul 01, 2012 @ 23:25:59
@joxer92 Which Soundfont package did you end up using to render the audio files? Did the sound come out close to http://mudcu.be/piano/? I don’t know of any packages that create the MIDI files in those languages, but if you did find a MIDI package in those languages, it should work with my library, as MIDI is a standardized format.
I’m curious how you ended up rendering the MIDI files without NodeJS installed, as that’s a big part of the compilation process… but, if you want to install node, it’s super easy, there’s a wiki about it; https://github.com/joyent/node/wiki/Installation
Jul 13, 2012 @ 07:50:54
@mud Sorry if i reply late, i’ve got a lot of work to do. I’ll pastebin you the script i’ve modified, so you can see the differences. I’ve used some free soundfont files that i find across the web. The sound it’s similar to it, but not so clear. The tempo isn’t always correct.
http://pastebin.com/gAJ2zfZE
Jul 25, 2012 @ 20:39:09
@joxer92 It looks like you’re using the same script, it’s using NodeJS so must be installed on your computer. It’s hard to find good free sources of SF2 files, there are lots of great paid SoundFonts out there though. That’s what I ended up using on Color Piano.
Jul 18, 2012 @ 18:02:02
I am reasonably comfortable with javascipt and currently use it in web page design and extensively to control the playback of QuickTime movies. I am looking for a method that allows me to send MIDI commands from a browser in real time via javascript to a sound font. Not just start and stop, but MIDI channel messages (such as Note On, Program Change, etc). I didn’t quite get if that is what you are doing, or if this method is limited to soundfont playback through a presaved MIDI file. If so, fabulous, though for my purposes I don’t require the visual elements.
Jul 22, 2012 @ 23:07:44
@miskeljp Unfortunately, at this moment, there is nothing that goes into that much depth—MIDI.js supports Note On/Note Off but at this time, doesn’t support Program Changes (multiple instruments), but it could be worked in. I’ve heard abumarkub talking about the possibility of plugging in FluidSynth into the Native Client—this would provide full-MIDI SoundFont support, however, at this time, I don’t believe anyone is working on this. Also, there is talk at the W3C of opening up a MIDI API, that may or may not support SoundFonts.
Jul 24, 2012 @ 19:36:33
@mud I can certainly use the note on/off capability. Is there limited set of soundfonts that respond to midi.js and are they cross-platform?
Jul 24, 2012 @ 20:28:34
@miskeljp Soundfonts that respond to MIDI.js are limited to shorter duration instruments at this time—organs for instance will not sound great. The project is cross-platform, and should work in Google Chrome across systems. It works on other browsers as well, but it can sound a bit more “drunk” as there is no support for Web Audio API (an interface with perfect timing).
Jul 24, 2012 @ 20:46:48
For my projects I can stick to piano. Is there documentation on how to send noteon/off commands through midi.js? @mud
Jul 25, 2012 @ 04:23:35
@miskeljp The documentation is listed on the demo page, see “MIDI.noteOn” and “MIDI.noteOff”; http://mudcu.be/midi-js/
Oct 09, 2012 @ 17:13:33
Michael,
Thanks for sonifying the HTML5 Whitney Music Box – it sounds great! I’ve added you as a collaborator to the git archive – feel free to add your version to the HTML5 examples.
Oct 09, 2012 @ 17:29:20
Thanks for providing such a cool demo to show-off MIDI.js! I’ll push to the Whitney Music Box github repo over the next few days
Oct 28, 2012 @ 10:10:21
Hi;
Would it be possible to turn on/off different instruments in a midi file before or while playing?
Oct 28, 2012 @ 21:19:00
This has been worked into the codebase in JellyNote (using MIDI.js) http://www.jellynote.com/ So, it’s possible, however, at this point you’d need to work it in yourself. At some point, either someone will submit a patch to Github, or I’ll put one together myself, but until then… One thought though, you could connect with JellyNote and ask whether they’d be willing to submit a patch to the MIDI.js codebase, that would be cool!
Nov 15, 2012 @ 00:45:09
Is there any way to trap the audio output programatically, e.g. as an array of numbers / wav / etc?
Nov 15, 2012 @ 06:14:12
What do you mean by trap?
Nov 28, 2012 @ 01:16:32
michael, great stuff, i immediately had to try some stuff and i i’ve figured out the basic stuff so i can create little javascript melodies and send them to the browser output.
Some great moments of “More power Igor!!!” while playing with the possibilities, and I sincerely thank you for that!
Is there some API documentation available so i can work out some more things myself before asking stupid questions here? Is there a developers/user community? Github is not much help so far.
I would like to know much more about how I can tie together the different components and what is possible here.
I started out 2 days ago with your framework and am very excited about the possibilities, I allready created a text to music converter, where the text is converted to tonerows in different scales, to play back and manipulate. You might call it a text based sequencer. You can input text or use a little 2 octave onscreen keyboard. Tempo and meter are adjustable It also adds 2nd and third voices for polyfonic harmonies and I know I am just barely scratching the surface of the possibilities here. No design there yet, just functionality!
My next biggest wish is to find out a way to visualize what is being played, and i would love your or or someone else’s help or directions. It is probably simple, but i tried for a few hours to find out HOW but had to give up, to pick more low hanging fruits.
Anyway thanks for making it possible to realise an old wish: play midi sounds through javascript in a quite reliable way. Chrome rules for timing indeed, but probably other browsers will catch up some time or another.
Back to coding the text based sequencer now…
Dec 03, 2012 @ 23:01:04
It’s gotten a bit out of hand, like these things go, my little code now also has a composition generator, and the polyfonics now can add bass, second and third voice with several features, i’ve added a programmable drumbox. Every voice has seperate velocity settings so you can do a little mixing and balancing of the voices. For now development is done at http://www.dementedcousins.com/midishit/mymidi.html
but I will change that some day to somewhere easier to acces and remember.
There’s a lot of boring work to be done, I need to convert a lot of different scaletypes to their own arrays… Ellbow grease indeed.
Dec 04, 2012 @ 21:10:13
Hi Vincent, right now there is not really a better place to discuss MIDI.js than github, or connecting with me directly by email. It would be awesome to have some better docs, but haven’t had the time to put those together—if you would like to contribute to the docs or want to point out issues you ran into, that would be neat! You’re project is coming together nicely, such a cool idea! For visualization you’ll want to Google “Spectrum analyzer” and reference “Web Audio API”—there’s some pretty neat examples out there already to get you started.
Dec 05, 2012 @ 03:26:19
Hi Michael, some (well…) questions:
1 midi note off does not work? Am i correct or missing something?
2 visualization of the played midi (when its actually played, as delayed by the code) is that possible? I of course do see some callback stuff in your code, but can’t really get this to work, with my very modest level of understanding the code.
3 it would be huge to understand more of the soundfont creation process so i can convert my soundfonts (i have lots of them, also smaller but very useable ones from back in the AWE32 days… Unfortunately i do not have access to a unix like machine at the moment so i can’t really try the sh scripts. Would be cool to have a .bat version as well or something like that.
4 is there a way to stop midi playback? i mean, i send a batch of midi notes, created in one go, each with their own delay value using the MIDI.noteOn method to your script to get my notestrings playing, but after that, can i stop the playback? I probably should reconsider my coding ( for a next project than) if not.
I will certainly check out the web audio api, as recommended, and if you need some bugreports I will send them. I have some more smaller issues, but they are probably browser related… Chrome rules for now.
The whole code is accessible now through http://www.dementedcousins.com/midishit/textsequencer.html
Dec 06, 2012 @ 15:20:23
1 I’ve found out about the note off functionality and have put some remearks in github considering the fix as it is now and real time playback. A smal change in the code noteOff method would allow real time playback and noteOff behaviour working good. So querstion 1 is sorted.
2 considering the way the code works now my second question is answered as well, it’s not possible at this time, at least not in a simple way. Oh well, I’ve learned now…
3 still would like to convert, i ve seen that somebody has a windows script for this?
4 Also answered by looking at the code and the audio API… possible but not with a simple command. Every single source (note in the queue) needs to be stopped and shut up… I’ll write my own function for this…
Again thanks for puting me in the right direction!
Jan 25, 2013 @ 12:06:51
Hi Michael.
Thank you for all your effort in creating such a framework. It seems like the perfect solution for this project I’m preparing for.
Sorry for the noobish questions but, I haven’t tinkered with MIDI at all before. So I’m a little bit lost. What I basically need to do is play some midi files living on the server as base64 soundfonts in the browser. I really don’t need any visualization or anything else at this point. What I need is a simple play button. (Not even a stop or pause button)
How should I build up the process? What tools from the framework should I choose? What should be the steps? (Conversion->Play in browser)
[BTW: (Considering the conversion done), I tried and online base64 converter to convert a MIDI, then pasted it in in your demo. It worked. When I tried to port that to my project, the soundfont js returned a 404, probably due to a path issue. This, I can resolve, but I'm lost in conversion.]
Thanks!
Feb 04, 2013 @ 01:03:02
Hi,
thanks for sharing your code!
I created a multipletouch keyboard in spiral shape: http://spiral.qet.me/
I can mail you the files if you like.
Best regards,
Patrick
Feb 04, 2013 @ 22:34:14
I love your demo, it produces a “harp” like feeling in the sounds it creates, and could see people having a lot of fun expanding on this. Would you be interested to have your project included in the MIDI.js package on github as a featured demo? https://github.com/mudcube/MIDI.js
Mar 27, 2013 @ 17:58:13
Hi
Is it possible to use player.js to play a string of notes? The idea is the ability to pause and stop playing. I guess it could be possible to read a note data string as well as a midi data or base64 data.
Thanks.
Mar 27, 2013 @ 18:02:35
I’m not sure what you mean entirely. The demo supports play/pause/stop. You can load Base64 MIDI file data into the player.js by using: MIDI.Player.loadFile(base64, callback); Hope that helps!
Mar 28, 2013 @ 07:38:27
I’d like to play a melody, for example c d e f g f e d c, all quarter notes, but much longer. I guess there’s no simple way to stop/pause playing if I have used noteOn/noteOff for this. I wondered if it could be possible to load this string of notes to player and handle stop/pause-functions that way (maybe by coding a kind of string to events parser).