Git Product home page Git Product logo

mei-friend is a ‘last mile’ editor for MEI music encodings intended to alleviate the common task of cleaning up encodings generated via optical music recognition, or via conversion from other formats, originally implemented as a plugin package for the Atom text editor. The mei-friend Web Application is a reworking of the tool as a full-featured, cross-browser compatible Web application, with optimised performance and an extended set of features. The application is available online at https://mei-friend.mdw.ac.at.

Fundamental functionalities

mei-friend fundamental functionalities

Github workflow

mei-friend github workflow

Components

We use CodeMirror as our text editor, and Verovio as our music engraving engine. GitHub integration is provided using jsgit, jsgit-browser, and the GitHub REST API. XML-DOM manipulations are performed using tXml by Tobias Nickel. The MEI validation and RNG loading code is adapted from the implementation in the Verovio editor, kindly contributed by Laurent Pugin. It makes use of libxml2. Lute tablature formats are converted to MEI using luteconv by Paul Overell, via the luteconv-webui wrapper service developed by Stefan Szepe and hosted at mdw. PDF functionalities are provided by PDFKit by Devon Govett, using SVG-to-PDFKit. MIDI playback is implemented using html-midi-player. This is itself powered by Magenta.js, which also provides the SGM_Plus sound font used to sonify your encoding. Icons are taken from GitHub's Octicons repository.

Features

Editor. The CodeMirror editor implements important coding conveniences including code folding, line numbering, tag- and bracket matching and auto-closing; as well as alternate key mappings (e.g., ‘vim’, ‘emacs’). MEI-schema-informed autocomplete is also available.

File input and output. Files may be opened from the local file system (via a menu option or using drag’n’drop); from the Web via URL; or from GitHub, by specifying a user/organisation and selecting from the available repositories. GitHub integration allows users to log in, fork repositories, view logs, and commit changes. All Verovio-supported encoding formats are supported (MEI, uncompressed and compressed MusicXML, Humdrum, ABC, PAE). The current encoding can be downloaded as MEI, MIDI, and SVG. All interactions occur locally in the browser; nothing is uploaded anywhere, excepting GitHub commits. Editor content is persisted in local storage through page refreshes and browser restarts; support for persisting multiple files simultaneously is envisioned for future development.

Public repertoire. Our codebase includes a CSV file recording publicly licensed music encodings, which are offered through the ‘fork repository’ and ‘open URL’ interfaces, alongside a dedicated ‘public repertoire’ access point. Proposed additions to this repertoire meeting our requirements (publicly licensed files; available via GitHub or hosted on a CORS-enabled Web server) are gladly accepted via Github Issue or Pull Request.

Configurable display. Many aspects of the tool’s interface are user-configurable, including the orientation and size of the notation and editor panes; their scale factor / font-size; and colouring, via a selection of preconfigured themes, with the option of having the notation match the editor theme (or remain black on white); and, optionally setting the interface to follow the local system’s bright / dark mode settings. Crucially, Eulise’s circadian rhythm adjusts accordingly. These configurations are done via a dedicated ‘settings’ menu, which also exposes a large collection of tool-specific options for CodeMirror and Verovio.

Navigation. The interface supports musically meaningful navigation according to encoded sections, pages (first, prev, next, last, specified page number), and within displayed notes/rests. Due to the tightly coupled interaction between encoding (MEI text) and engraving (SVG image), selection and navigation occurs seamlessly across both modalities.

Pedagogy. To smooth the learning curve of users new to MEI, the MEI Guidelines are linked to from the ‘Help’ menu; further, users are able to directly look up documentation for the currently selected element through a keyboard shortcut / help menu item.

Editor functions. In addition to all features of the Atom plugin package, we now offer commands to insert and delete clefs, beam-spans, and spiccato articulation; to insert the vertical group (vgrp) attribute for selected elements supporting this attribute (such as dynam, dir, hairpin), with dynamic number attribution; and, to insert the supplied element around a selection and show all supplied elements in a configurable colour.

Validation against MEI schema. Based on the code of the Verovio editor kindly provided by Laurent Pugin, mei-friend automatically loads the RNG schema specified in the MEI file to validate the encoding. It makes use of Gnome’s libxml2. Validation behaviour is configurable (automatic or on-demand) through the mei-friend settings.

Facsimile support. mei-friend makes the content of the facsimile element accessible by displaying zone elements ontop of the surface images in a dedicated facsimile panel, providing interactive zone editing functionality (resizing, panning, inserting & deleting zones) as well as an automated workflow for ingesting external facsimile content into MEI encodings.

Annotation support. The annotation panel provides tooling for generating in-line elements, as well as for listing, navigating between, and visualising annotations. Support for stand-off Web Annotations is planned for future development.

Installation

To try out mei-friend, simply navigate to the production instance on https://mei-friend.mdw.ac.at. To run your own instance locally on your system, please follow the installation instructions.

Publications

Goebl, W., & Weigl, D. M. (2023). mei-friend v1.0: Music Encoding in the Browser. Encoding Cultures. Joint MEC and TEI Conference 2023, Paderborn, Germany. https://teimec2023.uni-paderborn.de/contributions/159.html

Goebl, W. & Weigl, D. M. (2023). The mei-friend Web Application: Editing MEI in the Browser. Music Encoding Conference Proceedings 2022 [Late-breaking Reports]. doi:10.17613/dnj6-yy29.

Goebl, W. & Weigl, D. M. (2022). Alleviating the Last Mile of Encoding: The mei-friend Package for the Atom Text Editor. In S. Münnich & D. Rizo (Eds.), Music Encoding Conference Proceedings 2021 (pp. 31–39). University of Alicante. doi:10.17613/fc1c-mx52 (Best Paper Award MEC'21)

Acknowledgements

The mei-friend Web application is developed by Werner Goebl (@wergo) and David M. Weigl (@musicog), Department of Music Acoustics – Wiener Klangstil (IWK), mdw – University of Music and Performing Arts Vienna. Development is undertaken as part of the Signature Sound Vienna Project. This research was funded by the Austrian Science Fund (FWF) P 34664-G. The mei-friend Atom plugin package was developed as part of TROMPA (Towards Richer Online Music Public-domain Archives), with funding from the European Union's Horizon 2020 research and innovation programme H2020-EU.3.6.3.1. under grant agreement No 770376.

License

The mei-friend Web application is published under the GNU AGPL 3.0 license.

mei-friend's Projects

mei-friend icon mei-friend

The mei-friend Web Application: Editing MEI in the Browser

omr-beethoven-demo icon omr-beethoven-demo

Sechs Variationen, Opus 76 by Ludwig van Beethoven, encoding of Breitkopf und Härtel edition, 1862–90. Plate 164.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.