The JavaScript blog.


audio browser standards sota

State of the Art: Web MIDI API

Posted on .

In a previous life I wrote a lot of music, so I have a certain amount of familiarity with MIDI. Mentioning MIDI to non-musicians usually results in either a disbelief that MIDI still exists, or nostalgia for 90s PC games (I'm a big LucasArts fan). So if you're not familiar with MIDI, it's not all about bad sounding music files on GeoCities, it's actually a specification for networking musical instruments, computers, and a wide variety of wonderful hardware.

Yamaha's Tenori-On can act as a slightly more unusual way to control MIDI devices.

The Web MIDI API was published as a working draft on the 25th of October, with input from Google's Chris Wilson. It outlines an API that supports the MIDI protocol, so future web applications will be able to enumerate and select MIDI input and output devices, and also send and receive MIDI messages. This is distinct from playing back MIDI files -- the HTML5 <audio> element should take care of that.

JavaScript-powered MIDI strikes me as of particular interest to both musicians and makers -- hackers building art installations or novel control schemes for music projects.


The navigator object, typically used to query user agent information, provides interfaces to a few new APIs like geolocation. The MIDI API uses it to expose MIDI access, and then available devices can be iterated over and inspected further:

navigator.getMIDIAccess(function(MIDIAccess) {  
  var inputs = MIDIAccess.enumerateInputs()
    , outputs = MIDIAccess.enumerateOutputs()

MIDI messages can then be sent and received. There's a test suite by Jussi Kalliokoski with more JavaScript examples here: web-midi-test-suite.

Implementation Progress

There's currently a low-level MIDI plugin called Jazz-Plugin. For tracking browser support and other audio-related topics, the most accessible source is probably the HTML5 Audio Blog written by Jory K. Prum.



ecmascript webgl slides standards

randexp.js, ECMAScript 5 Presentation, Online Editor for Sparks.js

Posted on .


randexp.js (GitHub: fent / randexp.js, License: MIT, npm: randexp) by Roly Fentanes is a library for creating random strings based on a regular expression. The resulting string will match the expression provided:

/hello+ (world|to you)/.gen
// => hellooooooooooooooooooo world

A more useful example might be generating a random date:

new RegExp((January|February|March|April|May|June|July|August|September|October|November|December) ([1-9]|[12][0-9]|3[01]), (19|20)[0-9][0-9]).gen  
// March 4, 2038

This could be a useful way to generate test data in unit tests.

The way the RegExp object is modified by this library goes against the grain a little bit, and using a getter to return values seems a little bit odd, so I've asked the author about the API design through GitHub.

ECMAScript 5 Presentation

I don't usually post slides, because without the corresponding talk they're usually too hard to follow. ECMAScript 5 by Damian Wielgosik is a 150 slide presentation that introduces ECMAScript 5, and is relatively easy to follow if you don't mind pressing the right arrow key 150 times.

The majority of the slides are concerned with new methods on Object, and some patterns that make use of these new methods are explained. Other areas covered include Function.prototype.bind, new Array.prototype methods, and strict mode.

Particles: Online Editor for Sparks.js


Particles: Online Editor for Sparks.js is an introductory tutorial for sparkseditor (GitHub: jeromeetienne / sparkseditor, License: MIT) by Jerome Etienne which is a GUI editor for Sparks.js, a 3D JavaScript particle engine.

Press the "code" button to show the code used to generate the particle system. The code can be edited, and the changes will be displayed in real time. To share the results, press the "export" button.

A wide range of effects can be created with Sparks.js. There are examples available at jabtunes.com/labs/arabesque/.