write music notations on web page [closed]

Answer 1

i think you could try with a music font, like these 2: http://www.fontspace.com/david-rakowski/lassus or http://www.fontspace.com/robert-allgeyer/musiqwik (there maybe others, i made a quick search...)

it's not perfect, but it could do the trick. You'll have to integrate the font on your website and get it working with the proper css rules...

Answer 2

Here are a few libraries with the supported formats:

• VexFlow (own textual language called VexTab)
• AlphaTab (GuitarPro, own textual language called alphaTex)
• Verovio (MEI, can import MusicXML)
• ABCjs (ABC)

Answer 3

I used Lilypond as the notation language, and I wrote small PHP script that parsed out the lilypond scripts out of a Markdown document and replaced them with the rendered PNG file.

You can have a look at the way this Wordpress Plugin does the job.

Answer 4

There is some ASP.NET MVC API for music engraving: http://manufaktura-controls.com/ It renders notes to SVG or CANVAS format.

EDIT: I recently released my music notation library as open source: http://musicengravingcontrols.com/ It has two web implementations: for ASP.NET MVC and ASP.NET Core and one experimental implementation for Blazor 0.4. The first two are server-side, the third is client-side (via WebAssembly).

Answer 5

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!

Answer 6

I used the Lassus font as mentioned in one of the other Answers before. http://www.fonts2u.com/lassus.font - Download the @fontface version which includes the stylesheet to link it and a html document as an example.

I used mine as follows:

@font-face {font-family:"Lassus";
            src:url("LASSUS.eot?") format("eot"),url("LASSUS.woff")     format("woff"),url("LASSUS.ttf") format("truetype"),url("LASSUS.svg#Lassus") format("svg");
            font-weight:normal;
            font-style:normal;
}