javascript - attribute - escribir notaciones de música en la página web

title html css

Question

Quiero poder escribir notas musicales y acordes en una página web.

¿Hay alguna biblioteca (como Mathjax para matemáticas) disponible para esto? Si no es así, ¿hay alguna otra manera de lograr esto con resultados decentes?

Answer 1

Aquí hay algunas bibliotecas con los formatos soportados:

• VexFlow (lenguaje textual propio llamado VexTab )
• AlphaTab ( GuitarPro , lenguaje textual propio llamado alphaTex )
• Verovio ( MEI , puede importar MusicXML )
• ABCjs ( ABC )

Answer 2

Creo que podrías probar con una fuente de música, como estas 2: http://www.fontspace.com/david-rakowski/lassus o http://www.fontspace.com/robert-allgeyer/musiqwik (quizás otras, Hice una búsqueda rápida ...)

No es perfecto, pero podría hacer el truco. Tendrá que integrar la fuente en su sitio web y hacer que funcione con las reglas de css adecuadas ...

Answer 3

Hay algunos ASP.NET MVC API para el grabado de música: http://manufaktura-controls.com/ Presta notas en formato SVG o CANVAS.

EDIT: Recientemente lancé mi biblioteca de notación musical como fuente abierta: http://musicengravingcontrols.com/ Tiene dos implementaciones web: para ASP.NET MVC y ASP.NET Core y una implementación experimental para Blazor 0.4. Los dos primeros son del lado del servidor, el tercero es del lado del cliente (a través de WebAssembly).

Answer 4

Mira esta API de Javascript para crear partituras usando html5 lienzo.

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

Ejemplo:

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

ACTUALIZADO (18 de marzo de 2014)

Y entonces:

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

Esto producirá:

¡Espero eso ayude!

Answer 5

Utilicé la fuente Lassus como se menciona en una de las otras Respuestas anteriores. http://www.fonts2u.com/lassus.font : descargue la versión de @fontface que incluye la hoja de estilo para vincularla y un documento html como ejemplo.

Usé el mío de la siguiente manera:

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

Answer 6

Lilypond como lenguaje de notación, y escribí un pequeño script PHP que analizaba los scripts de lilypond de un documento Markdown y los reemplazaba con el archivo PNG renderizado.

Puede echar un vistazo a la forma en que este complemento de Wordpress hace el trabajo.