Wednesday, May 12th, 2010
Music score notation in the browser
Category: Canvas
CSS:
-
-
score {
-
title: Hip Tune
-
artist: Hip Person
-
-
bar { v8 C4 D4 E4 F4 (C4 E4 G4) }
-
bar { v8 C4 D4 E4 F4 (C4 E4 G4) } repeat 3
-
}
-
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:
-
-
function VexNotationDemo1(b) {
-
b = new Vex.Music.Artist(b, {
-
scale:0.9, width:900
-
});
-
var c = b.CreateScore(),
-
d = b.CreateScore();
-
b.DrawScore(c);
-
var e = GetBar1(b,c);
-
b.DrawBar(e);
-
e = GetBar2(b,c);
-
b.DrawBar(e);
-
e = GetBar3(b,c);
-
b.DrawBar(e);
-
e = GetBar4(b,c);
-
b.DrawBar(e);
-
c = GetBar5(b,c);
-
b.DrawBar(c);
-
b.DrawScore(d);
-
c = b.CreateContinuingBarFrom(c,d);
-
b.DrawBar(c);
-
d = GetBar7(b,d);
-
b.DrawBar(d)}
-
-
function GetBar4_2(b,c) {
-
c = b.CreateBar(c);
-
var d = c.AddLine();
-
d.AddNote(b.CreateNote({keys:["f##/4"],duration:"h"}));
-
var e = [];
-
e.push(b.CreateNote({keys:["a##/4"],duration:"16"}));
-
e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));
-
e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));
-
e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));
-
e.push(b.CreateNote({keys:["f#/4","a/4","f/5"],duration:"16"}));
-
e.push(b.CreateNote({keys:["f#/4","a/4","f/5"],duration:"16"}));
-
d.AddNotes(e);
-
e = b.CreateBeam(e);
-
d.AddBeam(e);
-
e = b.CreateNote({keys:["db/4"],duration:"32"});
-
var f = b.CreateNote({keys:["f#/4"],duration:"32"}),
-
g = b.CreateNote({keys:["db/4"],duration:"32"}),
-
h = b.CreateNote({keys:["f#/4"],duration:"32"});
-
d.AddNote(e);
-
d.AddNote(f);
-
d.AddNote(g);
-
d.AddNote(h);
-
b = b.CreateBeam([e,f,g,h]);
-
d.AddBeam(b);
-
return c;
-
}
-
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:
Rate the above post
Very nice! It’d be even better if you could just feed Lilypond files into it. :)
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
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!
It would be sweet to pair this up with tags :)
I wrote exactly that one year ago for me4music.net spirit looks quite the same and has audio output (midi)