A lightweight web component that renders MEI (Music Encoding Initiative) files as SVG using the Verovio library. Designed for integration with Edirom Online, it can also be used as a standalone component in any web application. No compilation or build process required.
Note: This repository contains the core JavaScript component. For demonstrations and examples, see the Edirom Web Components Demonstrator.
- MEI Rendering: Full support for MEI file rendering via Verovio toolkit
- Page Navigation: Navigate through multi-page scores
- Zoom Control: Adjustable zoom levels (10-100%)
- Element Navigation: Jump to specific measures, movements, or XML elements
- Multi-Movement Support: Navigate between movements (mdiv sections)
- Customizable Options: Full access to Verovio rendering options
- Dynamic Updates: Reactive attribute-based API
- Event System: Custom events for state changes and page updates
- edirom-verovio-renderer: GPL-3.0
- Verovio library: LGPL-3.0, GPL-3.0
git clone https://github.com/Edirom/edirom-verovio-renderer.git
cd edirom-verovio-renderer<!DOCTYPE html>
<html>
<head>
<title>MEI Viewer</title>
<script type="module" src="path/to/edirom-verovio-renderer-component.js"></script>
</head>
<body>
<edirom-verovio-renderer
meiurl="https://www.verovio.org/examples/downloads/Schubert_Lindenbaum.mei"
zoom="40"
width="800px"
height="1000px">
</edirom-verovio-renderer>
</body>
</html>The component uses HTML attributes for configuration. Change attributes programmatically to control the component:
const renderer = document.querySelector('edirom-verovio-renderer');
// Navigate to page 2
renderer.setAttribute('pagenumber', '2');
// Jump to measure 10
renderer.setAttribute('measurenumber', '10');
// Adjust zoom
renderer.setAttribute('zoom', '60');All attributes are strings. The component automatically converts values to the appropriate type.
| Attribute | Type | Description | Default |
|---|---|---|---|
meiurl |
String | URL to the MEI file to render | "https://www.verovio.org/examples/downloads/Schubert_Lindenbaum.mei" |
width |
String | Component width (with units, e.g., "800px") | "200px" |
height |
String | Component height (with units, e.g., "1000px") | "700px" |
zoom |
Number | Zoom level / Verovio scale (10-100) | 20 |
pagenumber |
Number | Current page to display | 1 |
| Attribute | Type | Description | Example |
|---|---|---|---|
measurenumber |
Number/String | Navigate to a specific measure by its @n attribute |
"10" |
elementid |
String | Navigate to any element by its @xml:id |
"note-123" |
movementid |
String | Navigate to a movement by its @xml:id |
"movement-02" |
mdivname |
String | Navigate to an mdiv by its @label attribute |
"First Movement" |
| Attribute | Type | Description | Default |
|---|---|---|---|
verovio-url |
String | URL to Verovio toolkit JavaScript file | "https://www.verovio.org/javascript/5.3.2/verovio-toolkit-wasm.js" |
verovio-options |
Object/String | Verovio toolkit options (JSON string or object) | See below |
pagewidth |
Number | Page width in Verovio units (100-100000) | Calculated from width and zoom |
pageheight |
Number | Page height in Verovio units (100-60000) | Calculated from height and zoom |
{
breaks: "auto",
scale: 20,
spacingStaff: 7,
pageHeight: 4500,
pageWidth: 4500,
footer: "none",
header: "none"
}The component dispatches custom events for state changes and updates.
Fired after rendering with current page information.
renderer.addEventListener('page-info-update', (event) => {
console.log(`Page ${event.detail.pageNumber} of ${event.detail.totalPages}`);
});While the component is primarily controlled via attributes, you can also access these methods:
const renderer = document.querySelector('edirom-verovio-renderer');
// Navigate to next/previous page
renderer.calculatePageNumber('next');
renderer.calculatePageNumber('previous');
// Zoom in/out
renderer.calculateZoom('zoomUp'); // +10%
renderer.calculateZoom('zoomDown'); // -10%
// Navigate to specific element
renderer.gotoElementId('measure-042');
renderer.gotoMeasure(15);
renderer.gotoMdiv('Allegro');- Modern browsers with ES6 module support
- Chrome/Edge 61+
- Firefox 60+
- Safari 11+
# Clone the repository
git clone https://github.com/Edirom/edirom-verovio-renderer.git
cd edirom-verovio-renderer
# Start a local server (Python example)
python3 -m http.server 8080
# Open in browser
# http://localhost:8080/demo-interactive-api.htmlContributions are welcome! Please read our Code of Conduct first.
See CITATION.cff for more details.
- Edirom Online
- Verovio Documentation
- MEI (Music Encoding Initiative)
- Edirom Web Components Demonstrator
For issues and feature requests, please use the GitHub issue tracker.
GPL-3.0 License - see LICENSE file for details.
Developed by The Edirom Project • Powered by Verovio