Activate your free membership today | Log-in

Wednesday, May 12th, 2010

Music score notation in the browser

Category: Canvas

PLAIN TEXT
CSS:
  1.  
  2. score {
  3.   title: Hip Tune
  4.   artist: Hip Person
  5.  
  6.   bar { v8 C4 D4 E4 F4 (C4 E4 G4) }
  7.   bar { v8 C4 D4 E4 F4 (C4 E4 G4) } repeat 3
  8. }
  9.  

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

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:

Posted by Dion Almaer at 5:11 am
5 Comments

OOOOO
Rate the above post

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.