Wednesday, May 12th, 2010
Music score notation in the browser
CSS:
score {
title: Hip Tune
artist: Hip Person
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;
}
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> :)
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)