A music notation engraving library

A music notation engraving library

Designed for the Music Encoding Initiative - Fast - Light - Flexible - No dependencies

Description

The Verovio App is the easiest way to embed music rendered with Verovio in a web page. It implements and responsive and a document view. It includes navigation buttons for the responsive view and zooming.

Code

Only a few lines of codes are needed to have the example above running in your webpage: 

<div class="panel-body">
    <div id="app" class="panel" style="border: 1px solid lightgray; min-height: 800px;"></div>
</div>

<script type="module">
    import 'https://editor.verovio.org/javascript/app/verovio-app.js';

    // Create the app - here with an empty option object
    const app = new Verovio.App(document.getElementById("app"), {});

    // Load a file (MEI or MusicXML)
    fetch("https://www.verovio.org/editor/brahms.mei")
        .then(function(response) {
            return response.text();
        })
        .then(function(text) {
            app.loadData(text);
        });
</script>

Some additional options can be passed to the constructor: 

const options = {
    defaultView: 'document', // instead of 'responsive' by default
    documentZoom: 4 // 0-7, default is 3
}

It is also possible to disable the responsive or the document view with enableResponsive: false or enableDocument: false respectively. Have a try directly in the following JSFiddle.