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 :
- https://book.verovio.org/toolkit-re... (cliquez sur « JSON keys »)
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.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Suivre les commentaires : |