Des partitions de musique

Grâce à Verovio, ce plugin permet d’incorporer facilement des extraits de partitions musicales dans vos textes.

Grâce à la bibliothèque Javascript Verovio, voici un plugin qui permet d’incorporer facilement des extraits de partitions musicales dans vos articles ou dans tout autre contenu de votre site.

Vous me direz, “pourquoi eux ?”... Eh bien parce que le projet est jeune, ouvert à plusieurs langages et à plusieurs formats de codage musical. Bien qu’il rende déjà de grands services à tous, il semble très prometteur. La communauté est très active en ce moment, soucieuse d’améliorer cet outil chaque jour, au fil de la feuille de route préalablement établie, mais aussi des dysfonctionnements remontés par utilisateurs.

Les formats reconnus par ce plugin sont ceux qui sont pris en charge par Verovio (article source ici ) :

  • ABC Music Notation (ABC) (text-based music notation system originally designed for use with folk and traditional tunes) - Documentation
  • Plaine and Easie (PAE) (RISM format, library standard that enables entering music incipits in modern or mensural notation) - Documentation
  • Music Encoding Initiative (MEI) (XML-based file format, native input format for Verovio) - Documentation
  • Humdrum Music Notation (analytic music code for transcribing fully polyphonic textures) - Documentation
  • MusicXML (XML-based file format for representing Western musical notation) - Documentation

Installation

La procédure d’installation est standard. Le plugin est encore en phase de test, n’hésitez pas à en faire des retours.

La bibliothèque actuellement utilisée par le plugin est la version de développement de Verovio, mais à terme, une page de configuration verra le jour pour proposer des versions stables, avec des fonctionnalités variables.

Fonctionnement

Deux façons d’utiliser le plugin sont possibles :

  • l’insertion du code musical en clair dans le texte grâce à différentes balises
  • l’insertion d’un fichier musical, accessible grâce au modèle <score>

Ensuite, la bibliothèque Javascript se charge d’interpréter les données côté internaute pour afficher la partition voulue.

Le mode “inline” (en clair)

Ce mode correspond à l’insertion en clair des données musicales au sein de vos articles ou autres contenus du site. Il ne s’agit donc pas d’un fichier issu par exemple d’un logiciel d’édition de partitions comme MuseScore, Sibelius ou Finale.

Le plugin reconnaitra les données musicales placées entre une balise ouvrante et une balise fermante de type HTML.

La balise principale est : <ascore>Vos données...</ascore>. Elle reconnait a priori tous les formats.

Mais deux balises spécialisées existent également :

  • <abc>Vos données...</abc>
  • <pae>Vos données...</pae>

Voici deux exemples très simples :

<abc>ABC</abc>
<pae>ABC</pae>

Que l’on pourrait affiner ainsi :

<abc>
M: 4/4
K: C
AB z2 A>B C2 ||
</abc>
<pae>
@clef: G-2
@keysig: b
@timesig: 4/4
@data: {8'A8B} 4- {8.A6B} 4C//
</pae>

Lorsque le code devient plus complexe, il est nécessaire d’ajouter la balise de protection SPIP <html/>, afin d’éviter tout traitement typo qui va dénaturer et déstructurer vos données.

Voici un exemple très simple en format MEI :

<ascore><html>
<mei xmlns="http://www.music-encoding.org/ns/mei">
<music><body><mdiv><score>
  <scoreDef meter.count="4" meter.unit="4" key.sig="0">
    <staffGrp>
      <staffDef n="1" lines="5" clef.line="2" clef.shape="G"/>
    </staffGrp>
  </scoreDef>
  <section>
    <measure n="1" right="end">
      <staff n="1"><layer n="1">
        <note pname="d" oct="4" dur="1"/>
      </layer></staff>
    </measure>
  </section>
</score></mdiv></body></music></mei>
</html></ascore>

Résultat :

Le modèle

La syntaxe des modèles est assez ordinaire et les formats reconnus sont les mêmes qu’en saisie “inline”.

Pour un fichier n°9999 présent dans la bibliothèque, il suffit d’insérer la balise suivante pour afficher la partition correspondante :

<score9999>

Et SPIP fait le reste !

Le plugin ajoute en base la reconnaissance des extensions suivantes :

  • .mei : Music Encoding Initiative
  • .abc : ABC Music Notation
  • .krn : Humdrum Music Notation
  • .musicxml : MusicXML

Si besoin, l’extension .xml est déjà reconnu par SPIP.

La mise en cache

Lorsqu’un extrait musical est affiché, le plugin envoie le résultat au serveur pour un affichage optimisé par la suite.

Ce cache est recalculé lorsque le cache général de SPIP est vidé, supprimé (dossier /tmp/cache/) ou lorsque le paramètre suivant est ajouté à l’adresse de la page :

  • var_mode=recalcul.

En fonctionnement normal, la bibliothèque JS Verovio n’est chargée que si les données musicales détectées n’ont pas encore leur rendu en cache.

La mise en cache des images SVG et PNG produites est consultable dans le dossier suivant :

  • /tmp/cache/ascore/

Configuration

De nombreux paramètres existent pour piloter le rendu graphique :

  • Les paramètres internes du plugin
  • Les paramètres de la bibliothèque Verovio

En mode “inline”, les paramètres peuvent apparaitre juste après la balise ouvrante <ascore>, mais avant le séparateur [data]., comme ceci :

<ascore>
  ici les paramètres
[data]
  ici les données musicales
</ascore>

Les paramètres sont exprimés au choix comme ceci :

  • param : valeur
  • param = valeur

Les paramètres internes

  • balise : nom de la balise mère, “div” (par défaut) ou “span”
  • class : classe de la balise mère
  • style : style de la balise mère
  • styletitre : style du titre de la partition rendue
  • largeur : largeur de la partition
  • marges : marges (syntaxe identique au CSS margin)
  • zoom : échelle
  • align : alignement horizontal (“left”, “center” ou “right”)
  • cache : mise en cache ou non
  • code : exportation des données
  • mini : mode simplifié du rendu graphique
  • inline : mode très simplifié, utilisation au sein d’un texte

Les paramètres Verovio

Ils sont nombreux et sont disponibles ici :

Par défaut, le plugin préconfigure les paramètres suivants ;

  • pageWidth: 1700 // The page width (default: 2100; min: 100; max: 60000)
  • font: ’Bravura’ // Set the music font (default: “Leipzig”) : https://book.verovio.org/advanced-t...
  • svgViewBox: true // Use viewBox on svg root element for easy scaling of document
  • breaks: ’auto’ // Define page and system breaks layout (default: “auto”; other values: ’none’, ’auto’, ’line’, ’smart’, ’encoded’)
  • adjustPageHeight: true // Adjust the page height to the height of the content

L’export de données

Les formats disponibles à l’exportation sont :

  • source : format source interprété
  • abc : format source interprété, uniquement si la source est en format ABC
  • pae : format “Plaine and Easie”
  • mei : format “Music Encoding Initiative”
  • svg : image SVG vectorielle
  • png : image PNG transparente
  • jpg : image JPG sur fond blanc
  • midi. : fichier midi

Il suffit d’ajouter le paramètre “code”. Par exemple ;

<abc>code: source pae [data] ABC</abc>

Résultat :

Un mode “debug” est disponible :

<ascore>code: debug [data] ABC</ascore>

Ce mode affiche tous les exports disponibles.

Aller plus loin...

Voici d’autres exemples pour avoir une meilleure idée des capacités du plugin.

<abc>
T:Short tune
C:K. Rettinghaus
M:4/4
L:1/4
Q:"Andante"
K:G
"D"!mf!D|"G"G>A "Em"B {/A/}G|"Am"A>B "D7"A{/E/}D|"G"G>A "C"B "D"A|"G"G3|]
</abc>
<pae>
@clef:G-2
@keysig:xFCGD
@timesig:3/8
@data:'6B/{8B+(6B''E'B})({AFD})/{6.E3G},8B-/({6'EGF})({FAG})({GEB})/4F6-
</pae>

Si ça vous dit de collaborer au projet, le code de la bibiliothèque est déposé ici :
-  https://github.com/rism-digital/verovio

Attention : toutes vos remarques à propos de la qualité technique du rendu devront être adressés aux développeurs de la bibliothèque Verovio et non à l’auteur du présent article qui ne pourra maintenir que les aspects liés à la mise en plugin pour SPIP.

Discussion

No discussion

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom