Question

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

是否有可用于此的库（如Mathjax for math）？如果没有，那么还有其他方法可以达到这个效果吗？

Answer 1

使用html5画布查看此Javascript api以创建乐谱。

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

这将产生：

This

希望它有所帮助！

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

Answer 4

我使用Lilypond作为符号语言，我编写了一个小的PHP脚本，用于从Markdown文档中解析出lilypond脚本，并用渲染的PNG文件替换它们。

您可以查看this Wordpress Plugin完成工作的方式。

Answer 5

之前我使用过其中一个Answers中提到的Lassus字体。 http://www.fonts2u.com/lassus.font - 下载@fontface版本，其中包含用于链接它的样式表和一个html文档作为示例。

我用我的如下：

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

Answer 6

有一些用于音乐雕刻的ASP.NET MVC API：http://manufaktura-controls.com/ 它呈现SVG或CANVAS格式的注释。

编辑：我最近发布了我的音乐符号库作为开源：http://musicengravingcontrols.com/ 它有两个Web实现：用于ASP.NET MVC和ASP.NET Core以及一个用于Blazor 0.4的实验实现。前两个是服务器端，第三个是客户端（通过WebAssembly）。

在网页上写下音乐符号

6 个答案: