Wednesday, May 12th, 2010

Music score notation in the browser

Category: Canvas

>pre>

What if you could write music in a notation like the above? And have it render as something like this:

Mohit Muthanna has implemented music notion in Canvas. He has the beginnings of it right now, and still needs to tie in a nice DSL to write it out.

Jono of Mozilla worked on a simple text based DSL which was nice as you could just tweak text in a textarea and you are done.

The current API looks like this:

javascript
< view plain text >
  1. function VexNotationDemo1(b) {
  2.     b = new Vex.Music.Artist(b, {
  3.         scale:0.9, width:900
  4.     });
  5.     var c = b.CreateScore(),
  6.         d = b.CreateScore();
  7.     b.DrawScore(c);
  8.     var e = GetBar1(b,c);
  9.     b.DrawBar(e);
  10.     e = GetBar2(b,c);
  11.     b.DrawBar(e);
  12.     e = GetBar3(b,c);
  13.     b.DrawBar(e);
  14.     e = GetBar4(b,c);
  15.     b.DrawBar(e);
  16.     c = GetBar5(b,c);
  17.     b.DrawBar(c);
  18.     b.DrawScore(d);
  19.     c = b.CreateContinuingBarFrom(c,d);
  20.     b.DrawBar(c);
  21.     d = GetBar7(b,d);
  22.     b.DrawBar(d)}
  23.    
  24.     function GetBar4_2(b,c) {
  25.         c = b.CreateBar(c);
  26.         var d = c.AddLine();
  27.         d.AddNote(b.CreateNote({keys:["f##/4"],duration:"h"}));
  28.         var e = [];
  29.         e.push(b.CreateNote({keys:["a##/4"],duration:"16"}));
  30.         e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));
  31.         e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));
  32.         e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));
  33.         e.push(b.CreateNote({keys:["f#/4","a/4","f/5"],duration:"16"}));
  34.         e.push(b.CreateNote({keys:["f#/4","a/4","f/5"],duration:"16"}));
  35.         d.AddNotes(e);
  36.         e = b.CreateBeam(e);
  37.         d.AddBeam(e);
  38.         e = b.CreateNote({keys:["db/4"],duration:"32"});
  39.         var f = b.CreateNote({keys:["f#/4"],duration:"32"}),
  40.             g = b.CreateNote({keys:["db/4"],duration:"32"}),
  41.             h = b.CreateNote({keys:["f#/4"],duration:"32"});
  42.         d.AddNote(e);
  43.         d.AddNote(f);
  44.         d.AddNote(g);
  45.         d.AddNote(h);
  46.         b = b.CreateBeam([e,f,g,h]);
  47.         d.AddBeam(b);
  48.         return c;
  49. }

SVG could be a good choice for this too, with semantics in place. Then it would be cool to have a player, that reads it and pumps out the <audio> :)

Related Content:

5 Comments »

Comments feed TrackBack URI

Very nice! It’d be even better if you could just feed Lilypond files into it. :)

Comment by barryvan — May 12, 2010

Hi. We have been working on something similar for converting files in ABC notation. Checkout http://www.drawthedots.com/abcjs

Code is GPL: http://code.google.com/p/abcjs

Comment by Tirno — May 12, 2010

I created a really simple music notation editor using canvas for lilypond code sometime ago at http://jabtunes.com/notation/ but this looks really good too!

Comment by zz85 — May 12, 2010

It would be sweet to pair this up with tags :)

Comment by beriberikix — May 12, 2010

I wrote exactly that one year ago for me4music.net spirit looks quite the same and has audio output (midi)

Comment by nelsonX — May 15, 2010

Leave a comment

You must be logged in to post a comment.