write music notations on web page

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?

I choosed pataluc's answer because, it do not require HTML5 or any JavaScript. Small and simple. — msinfo, Jun 21 '13 at 12:37
possible duplicate of [Mathjax analog for lilypond](http://stackoverflow.com/questions/14318551/mathjax-analog-for-lilypond) — jtbandes, Jul 06 '15 at 05:36
What's wrong with HTML5 and JavaScript? You did write "in a web page", didn't you? — Alen Siljak, Feb 16 '21 at 15:05

Kees Sonnema · Answer 1 · 2014-03-18T15:24:19.080

29

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:

This

Hope it helps!

edited Mar 18 '14 at 15:24

answered Jun 19 '13 at 11:48

Kees Sonnema

5,759
6
51
106

Umm... that second snippet doesn't actually show how to add notes. It's just a repeat of the first snippet – John Dvorak Jun 19 '13 at 11:57
that's a "pre-pre-pre-alpha" (quoted ^^) but it seems very powerful and interesting. – pataluc Jun 19 '13 at 11:58
Sorry wrong part. but it's too long. You can see it yourself at the link I posted at the top of my answer. – Kees Sonnema Jun 19 '13 at 11:58
3

I think this is a really awesome api. You can make the canvas as big or as small as you want. and the notes aren't difficult to add. Also a big plus, there's a good/clean tutorial for it. – Kees Sonnema Jun 19 '13 at 12:00
And maybe it's just good to use it. there aren't a lot of people using this at the moemnt. and it looks like it's working fine even in the alpha state. – Kees Sonnema Jun 19 '13 at 12:01
is there an option to play the music in midi ? I didn't find one in the doc – Ced Nov 06 '16 at 05:11

thSoft · Answer 2 · 2017-01-12T14:02:53.823

24

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)

edited Jan 12 '17 at 14:02

answered Nov 28 '14 at 15:12

thSoft

21,755
5
88
103

2

I am the developer of AlphaTab. In the latest build (source on GitHub) we also support a JSON variant of the internal datamodel we use. This makes it more easy to store files in the database than GuitarPro Binary Files. MusicXML is on my roadmap. – Danielku15 Mar 19 '15 at 05:56
HTML5 view link dead :| – rogerdpack Aug 19 '16 at 16:07
Replaced with a link to another library. – thSoft Jan 12 '17 at 13:55
1

I created an Observable library to embed ABC tunes in notebooks: https://beta.observablehq.com/@thsoft/abc – thSoft Jun 07 '18 at 09:57

score 10 · Accepted Answer · answered Jun 19 '13 at 11:52

10

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...

answered Jun 19 '13 at 11:52

pataluc

569
4
19

It looks like an interesting idea. Doesn't allow for anything reasonably complex, but at least it's extremely easy to use. – John Dvorak Jun 19 '13 at 11:55
that was my thought indeed.. – pataluc Jun 19 '13 at 11:56

score 2 · Answer 4 · answered Jun 19 '13 at 11:59

2

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.

answered Jun 19 '13 at 11:59

moonwave99

21,957
3
43
64

Jacek Salamon · Answer 5 · 2018-07-20T17:38:27.867

2

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

edited Jul 20 '18 at 17:38

answered Jun 07 '16 at 12:57

Jacek Salamon

64
1
4

1

This is a great project. – chikitin Nov 25 '20 at 01:41

score 1 · Answer 6 · answered Jun 19 '13 at 12:17

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;
}

write music notations on web page

6 Answers6

Linked