Pentagramas para la web

¿Que tal si se pudiera escribir música en una notación como la que se muestra a continuación y que fuera representada visualmente cómo muestra la figura? Mohit Muthanna ha implementado la noción de pentagrama utilizando el elemento canvas de HTML5 (algo que Internet Explorer no implementará). La versión actual es reciente aún, y todavía necesita un DSL para escribirla. Jono de Mozilla trabajó en un simple DSL basado en texto que resultó muy interesante porque permite hacerlo con solo modificar el texto en un elemento textarea. Si desea conocer los detalles continúe leyendo hasta el final. Le invito a suscribirse mediante RSS si desea estar al tanto de otras noticias del mundo de la informática, y las tecnologías web.

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
}
 

La API luce actualmente de la siguiente forma:

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 podría ser también una buena opción para hacer esto. En cualquier caso sería genial tener un control que generara el audio a partir de la partitura, no creen?