在网页上编写音乐符号

Question

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

是否有可以做到这一点的库（像数学公式的Mathjax）可用？ 如果没有，那么还有什么其他方法可以获得体面的结果？

- msinfo

---

我选择了pataluc的回答，因为它不需要HTML5或任何JavaScript。简单而且小巧。 - msinfo

可能是 Mathjax analog for lilypond 的重复问题。 - jtbandes

HTML5和JavaScript有什么问题吗？你是写“在网页上”，对吧？ - Alen Siljak

Answer 1

看一下这个使用 HTML5 canvas 创建乐谱的 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);

这会产生：

希望能帮到你！

- Kees Sonnema

---

嗯...第二个片段实际上并没有展示如何添加注释。它只是第一个片段的重复。 - John Dvorak

这是一个“超级超级超级早期版本”（引用 ^^），但它似乎非常强大和有趣。 - pataluc

抱歉，我错了。但是这段内容太长了。你可以在我回答顶部发布的链接中自行查看。 - Kees Sonnema

我认为这是一个非常棒的API。你可以将画布大小调整得大或小，而添加笔记也不难。另外，还有一份很好/简洁的教程，这是一个巨大的优势。 - Kees Sonnema

也许使用它是个不错的选择。目前使用它的人不是很多，但看起来即使在 alpha 状态下也运行良好。 - Kees Sonnema

有没有在 MIDI 中播放音乐的选项？我在文档中没有找到。 - Ced

Answer 2

以下是几个支持的库及其格式：

• VexFlow （使用自己的文字语言 called VexTab）
• AlphaTab（GuitarPro，使用自己的文字语言 called alphaTex）
• Verovio（MEI，可以导入MusicXML）
• ABCjs（ABC）

- thSoft

---

我是AlphaTab的开发者。在最新的构建中（源代码在GitHub上），我们还支持我们使用的内部数据模型的JSON变体。这使得将文件存储在数据库中比GuitarPro二进制文件更容易。 MusicXML也在我的路线图上。 - Danielku15

HTML5 视图链接失效了 :| - rogerdpack

替换为另一个库的链接。 - thSoft

我创建了一个Observable库，以在笔记本中嵌入ABC曲调：https://beta.observablehq.com/@thsoft/abc - thSoft

Answer 3

我认为你可以尝试使用音乐字体，比如这两种：http://www.fontspace.com/david-rakowski/lassus或http://www.fontspace.com/robert-allgeyer/musiqwik（还可能有其他的，我进行了快速搜索...）

虽然不完美，但这可能会起到作用。您需要将字体集成到您的网站中，并使用适当的CSS规则使其正常工作...

- pataluc

---

这看起来是一个有趣的想法。虽然不能处理任何相对复杂的事情，但至少它非常容易使用。 - John Dvorak

这正是我的想法。 - pataluc

Answer 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）。

- Jacek Salamon

---

这是一个很棒的项目。 - chikitin

Answer 5

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

您可以查看这个WordPress插件的处理方式。

- moonwave99

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

- Morne