Afficher gratuitement une partition numérique dans le Browser

Je ne sais pas pour vous, mais moi je suis assez désolé de constater que les navigateurs ne supportent pas nativement les formats de partitions numériques…

Et ce n’est pas à défaut de supporter naturellement l’affichage de nombreux types de fichiers comme des formats d’image : JPEG, PNG, TIFF.. , ou même le format PDF.

Certains diront que le format PDF permet d’afficher des partitions numériques. On aura vu dans mes autres articles sur les formats de partitions LilyPond, MEI et MusicXML, que le PDF est l’enfant pauvre de la partition numérique, même s’il est quand même bien utile pour lire de nombreuses partitions provenant d’IMSLP, car c’est majoritairement le format proposé…

Et pourtant depuis quelques années, on voit s’afficher des partitions ça et là dans des browsers, qui plus est dotées de nombreuses fonctionnalités comme la lecture audio, la barre de suivi, etc ….. qui ne peuvent bien évidemment pas provenir de partitions PDF.

L’avantage principale de la lecture dans le browser est qu’il n’est nécessaire d’installer aucun reader spécialisé. Tous nos ordinateurs, tablettes ou smartphones sont équipés de browsers modernes comme Chrome, Firefox ou Safari offrant des fonctionnalités de visualisation assez étendues.

Revers de la médaille à ne pas disposer de reader spécialisé : on ne peut pas bénéficier de tous les avantages et des nombreuses fonctionnalités avancées d’une application dédiée… (voir Les nouveaux usages de la partition numérique). Bref on ne peut pas gagner sur tous les tableaux à la fois, mais reconnaissez que juste pour voir à quoi ressemble une partition, on peut tout à fait se contenter d’un visualiseur d’entrée de gamme…

Mais comment donc fonctionnent ces lecteurs intégrés aux browsers ?

Après avoir fait un petit survol de l’historique du sujet, nous verrons quelles sont les technologies existantes et nous verrons surtout comment faire soi-même l’affichage de partitions numériques, non seulement pour plusieurs formats de partitions, mais en plus gratuitement !!

L’époque des plugins pour l’affichage des partitions propriétaires

Il y a quelques années il était possible d’afficher des partitions dans un navigateur grâce à des plugins. Les plugins dans le browser sont des greffons qui vont jusqu’à aller installer des extensions sur le système (ex DLL sur Windows) pour pouvoir fonctionner.
Les plugins dédiés aux partitions nécessitent assez souvent un téléchargement, donc une inscription.
Par ailleurs, ils ont la fâcheuse habitude de devoir être installés sur tous les browsers qu’on utilise, ne supportent pas tous les OS ni tous les browsers.. bref c’est une plaie.

Parmi les plugins les plus répandus, on trouve :

Plugin Scorch

Un des plugins les plus connus dans le domaine est l’add-on Scorch pour les partitions Sibelius exclusivement. Il permet de jouer, transposer, changer les instruments midi, et imprimer ses partitions Sibelius.

Plugin Harmony Assistant

Harmony assistant fournissait un plugin pour ses partitions mais il reposait sur une api standard NPAPI compatible avec de nombreux navigateurs, et maintenant dépréciée.

Cette fonctionnalité a disparu et elle a été remplacée depuis par un export HTML depuis Harmony Assistant, nommé MyrWeb.

L’affichage sans plugins de partitions propriétaires

Technologie JavaScript+SVG ou JavaScript+HTML5 canvas

Avec les browsers récents et surtout HTML5, deux technologies supportées nativement par les browsers : SVG et HTML5 Canvas, pilotées par du JavaScript, langage également supporté par tous les browsers, ont rendu possible l’affichage de partitions agrémentées de nombreuses fonctionnalités de lecture.

Plusieurs éditeurs ont utilisé ces technologies pour l’affichage de partitions propriétaires :

NoteFlight

Noteflight permet tout d’abord de créer des partitions propriétaires dans le browser, puis de les intégrer (donc des les afficher) dans n’importe quelle page Web.
Les partitions incluses dans des pages avec cette technologie disposent d’un petit widget en permettant la lecture, et il est même possible de sélectionner les objets dans la partition pour les écouter, mais ils ne peuvent pas êtres édités.

Gustaf de neoScores

Gustaf permet un achat de partitions propriétaires via le site de Gustaf, et leur affichage dans le browser.

L’affichage de partitions non propriétaires mais limité ou nécessitant une inscription

En allant toujours plus loin dans l’ouverture, on trouve des éditeurs donnant la possibilité d’importer ses propres partitions ou des partitions écrites dans un format ouvert comme MusicXML, mais n’offrant que des possibilités limitées d’affichage sans enregistrement ou paiement d’une licence.

Dans cette catégorie, on trouve :

MuseScore

MuseScore qui permet la visualisation, la lecture audio, le défilement et le téléchargement de partitions MusicXML enregistrées sur le site de l’éditeur, mais moyennant une inscription sur leur site.

Flat.io

Flat.io Nécessite une inscription pour pouvoir accès au lecteur et qui plus est pour lire un nombre réduit de partitions.
Ceci étant le lecteur inclut l’import/export de fichiers MusicXML, le chargement de 15 partitions publiques, et d’une seule partition privée.

SoundSlice

SoundSlice permet de charger et de visualiser gratuitement une partition dans le browser grâce au Free MusicXML viewer.

Il faut savoir que les fichiers lus sont uploadés sur le site de SoundSlice et même si l’éditeur annonce ne les partager avec personne, ils sont utilisés pour leurs propres besoins.

Une fois chargée, la partition peut être écoutée, transposée, réduite à une seule partie, etc … mais pendant seulement 10 minutes… ☹ Pour bénéficier d’une utilisation non bridée du viewer, il faut acquérir une licence.

L’affichage libre de partitions aux formats ouverts mais exotiques

Parmi ceux-ci, citons :

Alphatab plutôt dédié tablatures et qui supporte des formats de fichiers Guitar Pro et un langage spécifique à Alphatab : Alphatex.
VexFlow qui propose également un langage spécifique VexTab
Symphonist par le créateur de VexFlow, mais apparemment le site est en version Beta..

Les projets OpenSource de librairies d’affichage de partitions dans le browser

Enfin il reste des initiatives Open Source dont certaines sont tout à fait sérieuses, permettant d’afficher une partition dans un browser, mais qui ne constituent pas pour autant des produits sur l’étagère ! Il faut malheureusement souvent se développer son lecteur grâce à des API JavaScript.

On trouve dans cette catégorie :

OpenSheet Music Display

OpenSheetMusicDisplay qui est basée sur VexFlow. Cette librairie supporte MusicXML.
Son inconvénient principal est qu’aujourd’hui elle est très peu documentée.

Verovio

Verovio est le dernier de cette liste car c’est incontestablement le meilleur que j’aie trouvé. J’avais déjà évoqué cette technologie lors de mon article sur MEI.

Verovio est une librairie JavaScript OpenSource qui après chargement d’un fichier MEI, PAE (Plaine & Easie, format spécifique au RISM) ou MusicXML (support partiel), permet de le convertir en SVG et du coup de l’afficher dans le Browser de manière naturelle.

La librairie prend en charge les polices de symboles musicaux SMuFL, permettant de faire varier les fontes avec les polices libres (et non libres) qui existent pour cette technologie.

Un petit exemple de ce qui peut être rendu est le suivant :

Créez un fichier .html avec le contenu suivant (un extrait de partition au format PAE):

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<script src="https://www.verovio.org/javascript/latest/verovio-toolkit.js" type="text/javascript"></script>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
  /* The Plaine and Easie code to be rendered */
  var data = "@clef:G-2\n\
    @keysig:xFCGD\n\
    @timesig:3/8\n\
    @data:'6B/{8B+(6B''E'B)}({AFD})/{6.E3G},8B-/({6'EGF})({FAG})({GEB})/";
  /* Create the Vevorio toolkit instance */
  var vrvToolkit = new verovio.toolkit();
  /* Render the data and insert it as content of the #output div */
  document.getElementById("output").innerHTML = vrvToolkit.renderData( 
      data, 
      { svgViewBox: true, breaks:"auto", adjustPageHeight: 1 }
  );
</script> 
</body>
</html>

Ouvrez-la avec Chrome ou Firefox, et vous obtenez la partition suivante affichée dans votre browser (rendue ici avec cette même méthode) :

MusicSheetViewerPlugin 4.1

L’API Verovio est très bien documentée à la page : https://www.verovio.org/tutorial.xhtml avec de multiples exemples de code montrant comment naviguer dans les pages, zoomer, jouer la partition, mettre les notes jouées en évidence, etc …

Le viewer Verovio

Verovio offre à travers son viewer totalement gratuit https://www.verovio.org/mei-viewer.xhtml, la possibilité de naviguer dans des partition, mais seulement au format MEI .

Il permet en dehors des fonctions basiques de navigation dans les pages, de jouer avec un lecteur midi basique la partition chargée depuis son ordinateur, et de mettre en surbrillance les notes au fur et à mesure qu’elles sont jouées…

Le viewer gratuit de partitionnumerique.com

Je vous ai bien entendu gardé le meilleur pour la fin…

A l’aide des API de Verovio, je vous ai mis à disposition sur la page Visualiseur un lecteur de partitions numériques assez basique, mais épuré, qui a l’avantage de supporter les formats MEI, MusicXML (support partiel), PAE, le zoom, le déplacement aisé dans les pages de la partition, mais pas la lecture midi ni la mise des notes en surbrillance.

Tout ce code s’exécute intégralement dans votre browser, donc pas de crainte de surcharger le site de partitionnumerique.com !!
Les partitions que vous ouvrez ne sont pas uploadées sur le site de partitionnumerique.com : Donc pas d’aspiration de vos données !!

Comment l’utiliser ?

  • Chargez une partition au format supporté, à l’aide du bouton ‘Choisissez un fichier’.
  • Click sur le bouton gauche pour reculer d’une page, sur le bouton droit pour avancer d’une page, double click pour début et fin.
  • Choisissez une autre valeur de zoom pour réduire augmenter le nombre de pages.
  • Cerise sur le gâteau, je vous ai rajouté le changement de fonte musicale. Les trois fontes supportées sont Bravura, Gootville et Leipzig (par défaut).

Voilà, ce petit reader n’est pas voué à se développer, mais j’espère qu’il pourra vous être utile pour visualiser vos partitions XML qui, il faut l’avouer, sont beaucoup plus utilisables sous cette forme!

Bonne musique!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *