Interfacing a midi keyboard or other real-time midi input with javascript?

Question

I want to create a simple visualization tool that would allow to represent my playing a midi keyboard on the screen. I play a relatively novel instrument type, called the harmonic table:

http://en.wikipedia.org/wiki/Harmonic_table_note_layout

http://www.soundonsound.com/newspix/image/axis49.jpg

And want to build tools to ease their use and to teach others how to use them.

However, I can't find a good way to get get midi into javascript environment (or, for that matter, Flash, or Java without a large helping of jiggery-pokery slightly beyond my reach, and the use of code from what look to be rather stale and abandoned open source projects. Neither language I am too enthused to work in for this project in any case).

Is there a suitable library or application that I have missed, that will enable me to do this?

score 13 · Accepted Answer · answered Jun 30 '11 at 04:26

13

While searching around for another solution (Flash based, using the functions of the Red5 Open source flash server - really ugly, but I'm desperate at this point) I found someone who had done exactly what I needed using Java to interface with the hardware. They had started with a flash solution and recently ported to Javascript. Yay!

http://www.abumarkub.net/abublog/?p=505

Don't let the caveats about 'proof of concept' discourage you: the basic functionality appears solid, at least with everything I have been able to throw at it.

So now I'm on my way, and so is anyone else who want to build javascript based midi interfaces/synths/what have you.

I can manipulate real-time midi in javascript! This is much better than flying cars and jetboots.

answered Jun 30 '11 at 04:26

Jon Biz

1,003
2
8
23

Oh my God. I love you. Please feel free to link your project somewhere, I would love to see how you use it as I start to get into Abumarkub. – Danny Jun 28 '12 at 04:41
1

I've been sidetracked by other stuff, and haven't gotten very far at all. But I've given it a lot of thought, and have reviewed the relevant javax libraries. Would you care to collaborate? You can contact me at user233442 at e l b i z r i dot etc,etc. – Jon Biz Jul 01 '12 at 04:40
1

@Danny: I have an proof of concept of a Reaktor-like javascript tool you may be interested in: http//midibiz.firebaseapp.com (Fwiw, there's a bug in Windows canary chrome implementation, but it works (mostly) as expected on a mac.) – Jon Biz Nov 24 '15 at 20:34

score 10 · Answer 2 · answered Mar 28 '12 at 17:56

I have made a NPAPI browser plugin that lets you communicate in Javascript with MIDI devices.

Currently it works on OSX in Chrome and Safari, and on Windows in Chrome.

I am working on support for other browsers (Firefox, Internet Explorer) and other operating systems (Linux, Android, iOs)

See: http://abumarkub.net/abublog/?p=754

kroe · Answer 3 · 2015-01-07T02:49:38.417

EDIT:

I recently published this module https://github.com/hems/midi2funk it's a node.js module that listens to midi and broadcast it through socket.io so if you have the luxury of running a node.js service locally together with your client side you might get some fun out of it...

~~~~~

A few others handy links, i kinda ordered in what i think would be most important for you:

edit: just realised the thread is old, hopefully the links will help someone ( :

score 6 · Answer 4 · answered Oct 17 '15 at 04:09

6

The Web MIDI API is now real in Google Chrome 43+. I even wrote a library to make it easier to work with it. If you are still interested and do not care that it currently only works in Chrome, check it out: https://github.com/cotejp/webmidi

answered Oct 17 '15 at 04:09

djip.co

997
10
17

score 2 · Answer 5 · answered Aug 01 '18 at 14:22

Nowadays browsers supports MIDI listening. All you need is

navigator.requestMIDIAccess().then(requestMIDIAccessSuccess, requestMIDIAccessFailure);

and listen keys

function requestMIDIAccessSuccess(midi) {
            var inputs = midi.inputs.values();
            for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
                console.log('midi input', input);
                input.value.onmidimessage = midiOnMIDImessage;
            }
            midi.onstatechange = midiOnStateChange;
        }

See working example here

score 1 · Answer 6 · answered Dec 24 '12 at 18:55

I am really excited by the upcoming Web MIDI API. As far as I know, its only under discussion and hasn't made it into any browsers yet.

Combined with the Web Audio API which has started to be implemented in some browsers already, it will be possible to have complete software synthesis in the browser. Exciting times.

score 1 · Answer 7 · answered Jan 09 '14 at 07:49

Since Web MIDI API is still a draft, there is no way of direct access to MIDI events in the browser.

A simple workaround could be to write a small server where you register MIDI events and communicate them to your javascript using a websocket. This could be done quite easily in Python.

score 1 · Answer 8 · answered Jun 28 '11 at 23:43

1

Most browsers don't allow access to any hardware except the keyboard and mouse - for obvious security reasons, so it's unlikely that you could access a midi device unless it's plugged in as one of those devices.

You could try finding a driver that would translate midi output to key presses, and then deal with those in the browser, but this would be a single-computer solution only.

answered Jun 28 '11 at 23:43

rockerest

10,412
3
37
67

Thanks for the response, but this would be thoroughly unworkable. No velocity, no aftertouch, no continous controllers. Fortunately, a few hours after I posted this, I stumbled on a project that fixes exactly the problem I had - see my answer below. – Jon Biz Jul 01 '11 at 17:09

Interfacing a midi keyboard or other real-time midi input with javascript?

8 Answers8