27

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

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

4

6 回答 6

28

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

这将产生：

这个

希望能帮助到你！

于 2013-06-19T11:48:11.443 回答
21

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

于 2014-11-28T15:12:47.360 回答
9

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

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

于 2013-06-19T11:52:34.440 回答
2

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

你可以看看这个 Wordpress 插件的工作方式。

于 2013-06-19T11:59:38.613 回答
2

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

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

于 2016-06-07T12:57:57.787 回答
1

我使用了之前其他答案之一中提到的 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;
}
于 2013-06-19T12:17:21.483 回答