在网页上写乐谱[关闭]答案

【问题标题】：write music notations on web page [closed]在网页上写乐谱[关闭]
【发布时间】：2013-06-19 11:34:37
【问题描述】：

我希望能够在网页中编写乐谱和和弦。

是否有任何可用的库（例如 Mathjax 用于数学）？如果没有，那么还有其他方法可以取得不错的效果吗？

【问题讨论】：

我选择了 pataluc 的答案，因为它不需要 HTML5 或任何 JavaScript。小而简单。
Mathjax analog for lilypond 的可能重复项
HTML5 和 JavaScript 有什么问题？你确实写过“在网页中”，不是吗？

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

我是AlphaTab的开发者。在最新版本（GitHub 上的源代码）中，我们还支持我们使用的内部数据模型的 JSON 变体。这使得在数据库中存储文件比 GuitarPro 二进制文件更容易。 MusicXML 在我的路线图上。
HTML5 视图链接失效：|
替换为另一个库的链接。
我创建了一个 Observable 库来将 ABC 曲调嵌入到笔记本中：beta.observablehq.com/@thsoft/abc

【解决方案2】：

我认为您可以尝试使用音乐字体，例如以下 2：http://www.fontspace.com/david-rakowski/lassus 或 http://www.fontspace.com/robert-allgeyer/musiqwik（可能还有其他字体，我快速搜索了...）

它并不完美，但它可以解决问题。您必须在您的网站上集成字体并使其与正确的 css 规则一起使用...

【讨论】：

这看起来是个有趣的想法。不允许任何相当复杂的东西，但至少它非常易于使用。
这确实是我的想法..

【解决方案3】：

看看这个使用 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);

这将产生：

希望对你有帮助！

【讨论】：

嗯...第二个 sn-p 实际上并没有显示如何添加注释。这只是第一个sn-p的重复
这是一个“pre-pre-pre-alpha”（引用 ^^），但它看起来非常强大和有趣。
对不起部分错误。但它太长了。您可以在我在答案顶部发布的链接中自己查看。
我认为这是一个非常棒的 api。您可以根据需要使画布变大或变小。并且注释并不难添加。还有一个很大的好处，它有一个很好/干净的教程。
也许使用它就很好。目前使用这个的人不多。即使在 alpha 状态下，它看起来也能正常工作。

【解决方案4】：

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

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

【讨论】：

这是一个很棒的项目。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我使用了之前其他答案之一中提到的 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;
}

【讨论】：