javascript 在网页上写乐谱
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17190131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
write music notations on web page
提问by msinfo
I want to be able to write music notation and chords in a web page.
我希望能够在网页中编写乐谱和和弦。
Is there any library (like Mathjax for math) available for this? If not, then is there any other way to achieve this with decent results?
有没有可用的库（比如数学的 Mathjax）？如果没有，那么有没有其他方法可以实现这一目标并取得不错的结果？
采纳答案by pataluc
i think you could try with a music font, like these 2: http://www.fontspace.com/david-rakowski/lassusor http://www.fontspace.com/robert-allgeyer/musiqwik(there maybe others, i made a quick search...)
我认为您可以尝试使用音乐字体，例如 2：http: //www.fontspace.com/david-rakowski/lassus或http://www.fontspace.com/robert-allgeyer/musiqwik（也许还有其他字体，我进行了快速搜索...）
it's not perfect, but it could do the trick. You'll have to integrate the font on your website and get it working with the proper css rules...
它并不完美，但它可以做到这一点。您必须将字体集成到您的网站上，并使其与正确的 css 规则一起使用...
回答by Kees Sonnema
Look at this Javascript api for creating sheet music using html5 canvas.
看看这个使用 html5 画布创建乐谱的 Javascript api。
http://www.vexflow.com/docs/tutorial.html
http://www.vexflow.com/docs/tutorial.html
Example:
例子：
<canvas width=700 height=100"></canvas>
UPDATED (18 March 2014)
更新（2014 年 3 月 18 日）
And then:
接着：
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 will produce:
这将产生：
Hope it helps!
希望能帮助到你！
回答by thSoft
回答by moonwave99
I used Lilypondas the notation language, and I wrote small PHP script that parsed out the lilypond scripts out of a Markdown document and replaced them with the rendered PNG file.
我使用Lilypond作为符号语言，并编写了小的 PHP 脚本，从 Markdown 文档中解析出 lilypond 脚本，并将它们替换为呈现的 PNG 文件。
You can have a look at the way this Wordpress Plugindoes the job.
您可以看看这个 Wordpress 插件的工作方式。
回答by Morne
I used the Lassus font as mentioned in one of the other Answers before. http://www.fonts2u.com/lassus.font- Download the @fontface version which includes the stylesheet to link it and a html document as an example.
我使用了之前其他答案之一中提到的 Lassus 字体。http://www.fonts2u.com/lassus.font- 下载包含样式表的@fontface 版本以将其链接起来，并以 html 文档为例。
I used mine as follows:
我使用我的如下：
@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;
}
回答by Jacek Salamon
There is some ASP.NET MVC API for music engraving: http://manufaktura-controls.com/It renders notes to SVG or CANVAS format.
有一些用于音乐雕刻的 ASP.NET MVC API：http: //manufaktura-controls.com/它将笔记呈现为 SVG 或 CANVAS 格式。
EDIT: I recently released my music notation library as open source: http://musicengravingcontrols.com/It has two web implementations: for ASP.NET MVC and ASP.NET Core and one experimental implementation for Blazor 0.4. The first two are server-side, the third is client-side (via WebAssembly).
编辑：我最近将我的乐谱库作为开源发布：http://musicengravingcontrols.com/ 它有两个 Web 实现：用于 ASP.NET MVC 和 ASP.NET Core，以及一个用于 Blazor 0.4 的实验性实现。前两个是服务器端，第三个是客户端（通过 WebAssembly）。
