31 Oct

music notation through JavaScript

I’m working on a project which will hopefully make me rich (mwuahahaha!).

The idea is that I build an application, where people with MIDI keyboards can test their sight-reading online.

The program will judge your playing objectively, according to whether you hit the right notes, what your timing was like, whether you got the dynamics right, etc.

But anyway – in order to do that, some technical hurdles needed to be cleared:

  • 1. how do you read from a MIDI keyboard in JavaScript?
  • 2. how do you render notation online in JavaScript?

Before you ask – I’m using JavaScript because that’s what I’m good at. JavaScript for the front end, and PHP for the back.

The first part already has a solution – not too long ago, Daniel created a Java applet which reads from the keyboard and passes the key events to Flash, by way of JavaScript.

So all I need to do there is to hijack the middle part, which is not difficult.

On the rendering side, though, there does not appear to be any existing music notation rendering software for JavaScript.

One solution might be to pre-render the notation with a console app and save them as images. That’s not perfect, though, because I want to be able to highlight wrong notes, and render the sheet in different ways according to how the reader’s screen is set up.

So – I need to write a renderer in JavaScript.

Here’s the beginning of it (source).


To work on this, I will be going through my piano books and picking out pieces that are gradually more difficult for the notation renderer to try to render. Soon enough, it will be good enough for use.

Its current features:

  • reads from compressed MusicXML files.
  • renders crochets and minims, with appropriate padding between all notation symbols.
  • will wrap onto a second line of staff (or further if need be) if there is not enough room in just one.

Short-term upcoming features:

  • render two staves (bass and treble) to show left and right hands.
  • render semi-breves</li
  • show fingering on notes
  • dotted notes
  • quavers
  • tied quavers

The big idea with the application is that the site will be able to gradually increase the difficulty of the pieces, according to how well the player performs.

It’s not confined to sight-reading either – there’s no reason why this idea could not also be used to teach full songs.

6 thoughts on “music notation through JavaScript

  1. you’ve obviously gone further with it than I did!

    I’d love to dig into your code and see how you approached it. Will do that as soon as I have a moment free (two weeks behind on a book I’m writing!)

  2. Thanks. If your project is not dormant, I’m more than willing to help you interact with the rendering side of our engine.

    (The engine is quite strongly decomposed into a parser, a “parser” data structure, a layouter, a “layout” data structure, and a renderer)

    I have a similar idea to yours, involving the code from the guy behind tunepal. http://tunepal.org for recognition, rather than midi input.


  3. It’s only temporarily dormant while I finish off a book for Packt. I intend to get back into it when I have time to spare.

    I was considering whether to use your engine or 0xfe’s one – no need for me to continue on my own efforts when there are very strong alternatives already available.

    As far as I can see, 0xfe’s one is not yet OS (and all I’ve seen so far is heavily-minimised code), so it’s hard to make a proper comparison.

    I /will/ be getting back into this, and it would be very interesting to see how far your engine (and ABC notation) can be pushed. It will be a month or two, though.

Leave a Reply