Ejemplo
El siguiente cuadro contiene una página web independiente que muestra un ejemplo musical. Esta notación fue generada directamente dentro de la página web en lugar de ser cargada como un archivo de imagen separado desde el servidor. Esto se logra de la misma manera que se genera la notación musical en la página web de Verovio Humdrum Viewer: Los datos de Humdrum se almacenan dentro de la página web y son convertidos por el programa verovio javascript toolkit en una imagen SVG.
view stand-alone demo page directly
El texto HTML de la página se muestra en la siguiente sección junto con un comentario del código JavaScript utilizado para hacer la conversión y colocar la imagen SVG en la página.
Aquí están los datos de Humdrum que se almacenan dentro de la página de muestra:
**kern **kern
*clefF4 *clefG2
*k[f#] *k[f#]
*M4/4 *M4/4
=- =-
8GL 8ddL
8AJ 8ccJ
16BLL 2.b;
16A .
16G .
16F#JJ .
2G; .
== ==
*- *-
Si necesitas cambiar la notación gráfica de la página, todo lo que tienes que hacer es editar el texto del archivo Humdrum en la página, recargar la página, y la notación musical se actualizará automáticamente. Como ejercicio, copia el contenido de la página más abajo e intente cambiar el texto de Humdrum a:
**kern **kern
*clefF4 *clefG2
*k[f#] *k[f#]
*M4/4 *M4/4
=- =-
8GL 8ddL
8AJ 8cc@J
16BLL 2.b;
16AN .
16GN .
16F#JJ .
2G; .
== ==
*- *-
!!!RDF**kern: @ = marked note
!!!RDF**kern: N = marked note color=green
Aquí está la notación resultante, creada en esta página a partir de los datos anteriores:
También puedes incluso editar los datos de Humdrum inmediatamente por encima de la música para cambiar los colores o marcar las notas para cambiar su color en este ejemplo de notación (más sobre cómo se hace esto en la siguiente sección).
Código fuente
Para implementar el ejemplo de la imagen estática, copia y pega el siguiente texto en un archivo HTML, y luego visualiza la página en un navegador web.
<html>
<head>
<title>SimpleViewer</title>
<script src="https://verovio-script.humdrum.org/scripts/verovio-toolkit.js">
</script>
</head>
<body>
He aquí un breve ejemplo musical:
<script id="input" type="text/humdrum">
**kern **kern
*clefF4 *clefG2
*k[f#] *k[f#]
*M4/4 *M4/4
=- =-
8GL 8ddL
8AJ 8ccJ
16BLL 2.b;
16A .
16G .
16F#JJ .
2G; .
== ==
*- *-
</script>
<div id="output"></div>
<script>
var vrvToolkit = new verovio.toolkit();
var Input = document.querySelector("#input");
var Output = document.querySelector("#output");
document.addEventListener("DOMContentLoaded", displayNotation);
function displayNotation() {
if (!vrvToolkit) {
return;
}
var data = Input.textContent;
var options = {
inputFormat: "humdrum",
adjustPageHeight: 1,
pageHeight: 1000,
pageWidth: 1000,
scale: 40,
font: "Leipzig"
};
var svg = vrvToolkit.renderData(data, options);
Output.innerHTML = svg;
}
</script>
</body>
</html>
Comentario del código
Esta sección ofrece una descripción detallada del funcionamiento de la página web.
Carga e inicialización de Verovio
La línea 4 carga la versión del kit de herramientas de JavaScript de Verovio:
<script src="https://verovio-script.humdrum.org/scripts/verovio-toolkit.js"></script>
El script se carga desde https://verovio-script.humdrum.org, donde está alojada la versión más reciente del script Verovio compatible con Humdrum. También puedes descargar ese script y almacenarlo localmente en tu sitio web, o compilarlo directamente desde el verovio source (compila desde la rama develop-humdrum para la última versión compatible con Humdrum).
A continuación, en la línea 31 se inicializa la interfaz del verovio toolkit y se almacena en la variable vrvToolkit:
var vrvToolkit = new verovio.toolkit();
Datos Humdrum
El archivo Humdrum se almacena en las líneas 11–26 en un elemento de script que tiene el ID input:
<script id="input" type="text/humdrum">
**kern **kern
*clefF4 *clefG2
*k[f#] *k[f#]
*M4/4 *M4/4
=- =-
8GL 8ddL
8AJ 8ccJ
16BLL 2.b;
16A .
16G .
16F#JJ .
2G; .
== ==
*- *-
</script>
Extracción de datos de la página
El ID del script puede ser cualquier texto, siempre que el ID coincida con la referencia del ID en la línea 32:
var Input = document.querySelector("#input");
En este caso los datos de Humdurm están ocultos ya que se almacenan en un elemento <script>, pero cualquier elemento, como un div podría utilizarse para almacenar los datos de Humdrum de forma visible en la página.
El contenido del archivo Humdrum se extrae del elemento de almacenamiento en la línea 37 utilizando textContent:
var data = Input.textContent;
Opciones
Las opciones para el kit de herramientas de Verovio se pueden encontrar en la página verovio.org/command-line.xhtml. Estas opciones son para la línea de comandos, por lo que al utilizarlas en datos JSON para la versión JavaScript del kit de herramientas Verovio, cambia los espacios por las mayúsculas. Por ejemplo --page-height se convierte en pageHeight.
El adjustPageHeight se puede utilizar para mantener toda la música en una sola imagen estableciendo el pageHeight a un valor muy grande. Si adjustPageHeight está activado, Verovio reducirá la imagen SVG para eliminar el espacio en blanco en la parte inferior de la página. Si se establece adjustPageHeight a 0 o no se establece explícitamente la opción, se producirá una imagen de altura fija, posiblemente con una región en blanco después de que la música haya terminado.
El motor de grabado musical digital Verovio contiene tres fuentes posibles para elegir: Leipzig, Bravura y Granville.
Generación de la imagen SVG
La línea 46 contiene el código que convierte los datos de Humdrum en una imagen SVG:
var svg = vrvToolkit.renderData(data, options);
La función vrvToolkit.renderData() toma dos parámetros: (1) los datos musicales, y (2) un objeto javascript que contiene las opciones de renderización. La salida de renderData es una imagen SVG. Esta imagen se coloca en la página web en la línea 47:
Output.innerHTML = svg;