Dynamically generating MIDI in JavaScript | Hacker News Reader

Dynamically generating MIDI in JavaScript

sergimansilla.com

30 pointssergimansilla13 comments

Of course the HTML5 audio tag doesn't support MIDI. MIDI is (basically) a command set for interacting with tone generators, and beyond that, has nothing to do with making sound. Think of it more like an electronic equivalent to sheet music.

Nonetheless, implementing MIDI through javascript would be kind of cool. I'm about 90% done an HTML5 emulation of a Boss DR-110 (warts and all), and while the timing of the audio playback ain't great, I'd be curious to see if better results could be achieved by sending the sequencer data out as MIDI instead.

Considering how picky folks get about latency in audio software though, generating MIDI with Javascript seems more useful as a learning tool than an actual music production tool.

Why not attach a buffer to the front of the synth and run the audio rendering in a separate thread? Isn't this how software synths work now? What's preventing this from happening in the browser?

If you're handling it all yourself, I think you'd be better off coming up with your own format... MIDI is an old, gross binary format with lots of baggage. The main usage for this, I would imagine, would be to get a MIDI file out for use with some other application (despite being ugly, it is a standard format and has wide support).

The problem with that is that MIDI is a very strong standard, as bad as the format itself might be. Every single synth or keyboard out there exports to MIDI, and most of the time ONLY to MIDI.

Also, the MIDI format is not slow to generate or to read, it is actually designed for speed (and may other perks) and any implementation of it would be very likely faster than any other format you could come up with. Of course, you would still have to deal with its complications and the many particularities and edge-cases it has.

Strict timing is the #1 problem you need to solve if you want people to take your tool seriously. Check out ChucK and Impromptu if you haven't seen them. Both are 'strongly-timed'.

This problem is exactly why I feel that browsers need to implement some kind of 'Audio Canvas' API if there are going to be any serious audio apps developed in browser using JS. Currently only plugins like Flash offer the necessary timing control. Also, the current method for playing realtime-generated audio from JS involves packaging it up as a PCM Wave file and sending it to an <audio> tag. This is an ugly hack.

An example of a strongly-timed audio app in Flash: http://www.audiotool.com/app

Mozilla is working on an Audio Data API, and hopefully it will become the standard in the future. Take a look: https://wiki.mozilla.org/Audio_Data_API

I agree, latency is way too important in that scenario. I made that as an experiment, I never thought of it as a professional tool.

I am curious about your Boss DR-110 emulation in HTML5, are you going to publish it somewhere?

I'll definitely be posting it freely online when I'm done. At this point I'm pretty much down to the 'polish' stage. I'll probably post a link here, along with some observations I made while creating this.

After I publish it, I'm going to work on better knobs (they're a little clunky now) and the ability to store your patterns. As it stands now, if you leave the page and come back, it's like you're running off a 9v with no batteries. I'll either store the array in a cookie or make it something you can download/upload.

An option for browsers that don't support Quicktime is a Java to Javascript bridge that exposes portions of the MIDI framework (could be used as a fallback): http://mudcube7.blogspot.com/2010/08/dynamic-midi-generation...

I wrote something vaguely similar, but it relies on App Engine:

http://midiserver.appspot.com/ https://github.com/skybrian/Midi-Server

Agreed that this stuff is way too nonportable.

I've been wanting something to translate old Commodore 128 PLAY strings to MIDI. This might just be the ticket. Thank you, Sergi! I'll try and let you know how this works out!

That sounds like fun, can't wait to hear about it! Keep an eye on updates to the library, and if you run into bugs (you will) don't hesitate to nag me, or even solve them :)

Reply on news.ycombinator.com