CODEWITHSUNDEEP
javascriptmidi
Jon Biz
Jon Biz

Reputation: 1003

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

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?

Upvotes: 10

Views: 12204

Answers (8)

user1024
user1024

Reputation: 1121

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

Upvotes: 2

djip.co
djip.co

Reputation: 1037

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

Upvotes: 6

kroe
kroe

Reputation: 1126

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 ( :

Upvotes: 8

Albin Stigo
Albin Stigo

Reputation: 2131

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.

Upvotes: 1

frankster
frankster

Reputation: 1528

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.

Upvotes: 1

abudaan
abudaan

Reputation: 291

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

Upvotes: 10

Jon Biz
Jon Biz

Reputation: 1003

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.

Upvotes: 13

rockerest
rockerest

Reputation: 10508

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.

Upvotes: 1

Related Questions