write music notations on web page [closed]

Question

I want to be able to write music notation and chords in a web page.

Is there any library (like Mathjax for math) available for this? If not, then is there any other way to achieve this with decent results?

Answer 1

Look at this Javascript api for creating sheet music using html5 canvas.

http://www.vexflow.com/docs/tutorial.html

Example:

 <canvas width=700 height=100"></canvas> 

UPDATED (18 March 2014)

And then:

var canvas = $("div.three div.a canvas")[0];   var renderer = new Vex.Flow.Renderer(canvas,     Vex.Flow.Renderer.Backends.CANVAS);    var ctx = renderer.getContext();   var stave = new Vex.Flow.Stave(10, 0, 500);    // Add a treble clef   stave.addClef("treble");   stave.setContext(ctx).draw();    var notes = [     // Dotted eighth E##     new Vex.Flow.StaveNote({ keys: ["e##/5"], duration: "8d" }).       addAccidental(0, new Vex.Flow.Accidental("##")).addDotToAll(),      // Sixteenth Eb     new Vex.Flow.StaveNote({ keys: ["eb/5"], duration: "16" }).       addAccidental(0, new Vex.Flow.Accidental("b")),      // Half D     new Vex.Flow.StaveNote({ keys: ["d/5"], duration: "h" }),      // Quarter Cm#5     new Vex.Flow.StaveNote({ keys: ["c/5", "eb/5", "g#/5"], duration: "q" }).       addAccidental(1, new Vex.Flow.Accidental("b")).       addAccidental(2, new Vex.Flow.Accidental("#"))   ];    // Helper function to justify and draw a 4/4 voice   Vex.Flow.Formatter.FormatAndDraw(ctx, stave, notes); 

This will produce:

Hope it helps!