Писать нотные записи на веб-странице

Ответ 1

Я думаю, вы могли бы попробовать с музыкальным шрифтом, как эти 2: http://www.fontspace.com/david-rakowski/lassus или http://www.fontspace.com/robert-allgeyer/musiqwik (там, возможно, другие, я сделал быстрый поиск...)

это не идеально, но это может сделать трюк. Вам нужно будет интегрировать шрифт на свой сайт и заставить его работать с правильными правилами css...

Ответ 2

Посмотрите на этот Javascript api для создания нот с использованием html5 canvas.

http://www.vexflow.com/docs/tutorial.html

Пример:

 <canvas width=700 height=100"></canvas>

ОБНОВЛЕНО (18 марта 2014 года)

И затем:

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

Это даст:

Надеюсь, что это поможет!

Ответ 3

Вот несколько библиотек с поддерживаемыми форматами:

• VexFlow (собственный текстовый язык называется VexTab)
• AlphaTab (GuitarPro, собственный текстовый язык, называемый alphaTex)
• Verovio (MEI, может import MusicXML)
• ABCjs (ABC)

Ответ 4

Я использовал Lilypond в качестве языка нотации, и я написал небольшой PHP скрипт, который разбирал скрипты lilypond из "Markdown" документа и заменил их на рендеринг PNG файла.

Вы можете взглянуть на способ этот плагин Wordpress выполняет эту работу.

Ответ 5

Я использовал шрифт 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;
}

Ответ 6

Существует некоторый API ASP.NET MVC для музыкальной гравюры: http://manufaktura-controls.com/ Он отображает заметки в формате SVG или CANVAS.