Music score notation in the browser

[JasonOng]

Wow support for tablatures too! And also the blog comments mentioned interesting resources too.

 

 

Sent to you by JasonOng via Google Reader:

 

 

Music score notation in the browser

via Ajaxian » Front Page by Dion Almaer on 5/12/10

PLAIN TEXT

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:

PLAIN TEXT

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> :)

 

 

Things you can do from here:

• Subscribe to Ajaxian » Front Page using Google Reader
• Get started using Google Reader to easily keep up with all your favorite sites