osmd-angular

An Angular component to render sheet music using opensheetmusicdisplay

Usage no npm install needed!

<script type="module">
  import osmdAngular from 'https://cdn.skypack.dev/osmd-angular';
</script>

README

OpenSheetMusicDisplay Renderer for Angular

Angular component for OpenSheetMusicDisplay. Right now only the source is passed.

Usage

This project was built and tested with the following configuration:

Angular CLI: 7.3.6

Node: 10.15.1

Angular: 7.2.10

To use the component, install it with npm install osmd-angular. Then, on the component, just import it invoking import {OsmdRendererModule} from 'osmd-angular'.

On the html template, just use the tag <lib-osmd-renderer/> and pass the URL or XML source to render as below:


<div>
  <h1>Open Sheet Music Display Demo</h1>
  <label for="music-xml-source">URL or XML contents:</label>
  <textarea id="music-xml-source" style="width: 100%;" [(ngModel)]="musicXml" rows="10"></textarea>
  <lib-osmd-renderer source="{{musicXml}}"></lib-osmd-renderer>
</div>



External sources: