Generate live MIDI from Javascript [closed]

Question

I made some research and it seems that Javascript and MIDI are not going well together these days. At least so Google says.

As stated in this topic: generating MIDI in javascript, it is possible to create a file, either in Javascript or server-side, and play it like one would play a usual file.

But, I really would like to be able to send individual midi events, "live", as it would be a constant user interaction. I guess my plan B would be to create a Java applet that does this, but then my app wouldn't be pure HTML5 anymore.

I also heard HTML5's audio support isn't famous right now, so I also wondered, if no solution is available now, what are the possible future outcomes?

Thanks.

Marymarya

Answer 1

See the music embedding portion of this blog post by John Resig. (For some reason, the Mario game that Resig links to plays sound for me in Firefox but not Chrome or Safari; it'd be worth investigating why).

The idea is that you use a data URI to embed a base64 encoded version of your data within the HTML file itself. So you could write Javascript to continuously generate data in the MIDI format, then encode it in base64, and then inject it into an HTML5 <audio> element

Vogue

That's what I am already doing to generate whole sequences, and I'll think I'll have to stick to it to play single notes. The problem is that the latency is kinda noticeable, even if it's not that big. But I guess short of using a Java applet, this is the best solution right now. – Marymarya

Can you post a link to your code? It may be possible to decrease the latency by continuously generating tones in the background and creating multiple audio elements to fill them with. – Vogue

Answer 2

I believe your best option at the moment is to communicate from your HTML application via an xhr or websockets to a backend system running on your server that can do the actual translation into midi events. You might find that one of the many comet servers that are already available can make this part of your life easier, however many midi applications require relatively low latency, and you'll struggle to get comet techniques down much below 100ms.

Collected

This doesn't really help, I still have to find a way to send MIDI events to the client's OS. – Marymarya

Answer 3

if html5 is an option, you could try to generate osc events using websockets and convert them to midi signals using a server proxy.

What i don't know is if the timers in javascript are stable enough for generating accurate timings.

Indite

wait, so I would have to stream the music to the client? At that rate I don't see why I would use OSC. Or, once I got the midi signals on the client's machine, where do I send them :^? – Marymarya

osc events are not live music that is streamed to the use, but controll signals that get transported via udp or tcp. on the desktop you could run a small proxy that translates the osc events to midi signals that are sent to the midi-devices you want to control – Indite

So I would have to install that very proxy on the client's machine? I guess I can't do that in Javascript. – Marymarya

i don't think it can be done in javascript - the proxy would have to be an app that runs on the local machine – Indite