abc a SVG | Programar Plus

Aquí hay un pequeño ejemplo que Jeremy Keith solía usar en sus charlas. Me ha quedado grabado como uno de los mejores ejemplos de mejora progresiva y Technology Being CoolTM.

Existe este formato de notación musical llamado abc. No lo capitalizan. Un poco como npm, que supongo que tiene sentido ya que no es un acrónimo. Pero es el nombre de algo, así que es muy incómodo. Ughakdhk. De todos modos.

El formato en sí es realmente genial. Es súper simple y está basado en texto. Aquí está el ejemplo de su página de inicio:

X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
  GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
  g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|

Un poco como YAML, supongo. Esa es la música de toda esa canción. No está repleto de todas las posibilidades de las partituras; son solo notas y sincronización. Suficiente para comunicar una canción folclórica / tradicional, que es principalmente para lo que se utiliza.

Probablemente puedas acostumbrarte a leerlo tal como está, pero no creo que sea para eso realmente. Supongo que el formato se trata más de ser:

  1. Estandarizado (lo es, y hay 570,000 melodías, así que supongo que funcionó)
  2. Texto (apuesto a que toda la base de datos de canciones es sorprendentemente pequeña)
  3. Listo para convertirse en lo que sea

¡La parte de conversión es la parte divertida! Puede ver que sucede directamente en la página de inicio para el formato abc.

Lonesome Moonlight Waltz, almacenado en formato abc en el sitio, se muestra como partitura en formato PNG y se convierte en un formato de audio que se puede reproducir en la web. Básicamente MIDI emitido como MP3.

PNG está bien, pero ¿no sería mucho mejor que SVG? Por supuesto que lo haría.

Todo esto es relevante para Jeremy porque tiene un sitio web llamado The Session, que está dedicado a la música irlandesa. Almacena melodías en el sitio y, por lo tanto, utiliza adecuadamente el formato abc. En La sesión, puede hacer clic en un botón de Partitura y convertirá abc en SVG y lo mostrará.

Esa partitura se ve muy bien en el formato SVG nítido.

La conversión de SVG es posible completamente en JavaScript gracias a una biblioteca de código abierto. Esa es la parte de mejora progresiva. Almacene y envíe el formato básico y deje que el navegador mejore la experiencia, si puede (puede).

Eso es todo. Solamente genial.

La biblioteca de JavaScript que The Session realmente usa es abcjs de Paul Rosen y Gregory Dyke. El otro vinculado al anterior es abc2svg similar de Jef Moine.

(Visited 5 times, 1 visits today)