在网页上写下音乐符号

Question

我希望能够在网页中编写音乐符号和和弦.

有没有可用于此的库(如Mathjax for math)？如果没有,那么还有其他方法来实现这一目标吗？

Answer 1

看看这个Javascript api用html5 canvas创建乐谱.

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

例:

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

更新(2014年3月18日)

然后:

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

这将产生:

希望能帮助到你!

Answer 2

以下是一些支持格式的库:

• VexFlow(自己的文本语言称为VexTab)
• AlphaTab(GuitarPro,自己的文本语言称为alphaTex)
• Verovio(MEI,可以导入MusicXML)
• ABCjs(ABC)

Answer 3

我想你可以尝试使用音乐字体,比如这两个:http://www.fontspace.com/david-rakowski/lassus或http://www.fontspace.com/robert-allgeyer/musiqwik(可能有其他人,我做了一个快速搜索......)

它并不完美,但它可以做到这一点.您必须在您的网站上集成该字体并使其使用正确的css规则...