<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./opensheetmusicdisplay.min.js"></script> <style> * { margin: 0; padding: 0; } body { padding-bottom: 60px; height: 600px; overflow: hidden; } .vf-text { display: none; } </style> </head> <body> <div id="osmdContainer" /> <script> var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay("osmdContainer"); osmd.setOptions({ backend: "svg", drawTitle: false, drawPartNames: true, // drawingParameters: "compacttight" // don't display title, composer etc., smaller margins }); function render(){ osmd.render(); window.parent.postMessage({ api: 'musicStaffRender', loading: false }, '*'); } function renderXml(xmlUrl, partIndex) { osmd .load(xmlUrl) .then( function () { for (let i = 0; i < osmd.Sheet.Instruments.length; i++) { // console.log(osmd.Sheet.Instruments[i].Name); osmd.Sheet.Instruments[i].Visible = i === partIndex; } osmd.zoom = .5 render(); } ); } function resetRender(partIndex) { for (let i = 0; i < osmd.Sheet.Instruments.length; i++) { // console.log(osmd.Sheet.Instruments[i].Name); osmd.Sheet.Instruments[i].Visible = i === partIndex; } render(); } </script> </body> </html>