index.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <script src="./opensheetmusicdisplay.min.js"></script>
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. body {
  15. padding-bottom: 60px;
  16. height: 600px;
  17. overflow: hidden;
  18. }
  19. .vf-text {
  20. display: none;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div id="osmdContainer" />
  26. <script>
  27. var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay("osmdContainer");
  28. osmd.setOptions({
  29. backend: "svg",
  30. drawTitle: false,
  31. // drawingParameters: "compacttight" // don't display title, composer etc., smaller margins
  32. });
  33. function renderXml(xmlUrl, partIndex) {
  34. osmd
  35. .load(xmlUrl)
  36. .then(
  37. function () {
  38. for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
  39. // console.log(osmd.Sheet.Instruments[i].Name);
  40. osmd.Sheet.Instruments[i].Visible = i === partIndex;
  41. }
  42. osmd.zoom = .5
  43. osmd.render();
  44. }
  45. );
  46. }
  47. function resetRender(partIndex) {
  48. for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
  49. // console.log(osmd.Sheet.Instruments[i].Name);
  50. osmd.Sheet.Instruments[i].Visible = i === partIndex;
  51. }
  52. osmd.render();
  53. }
  54. </script>
  55. </body>
  56. </html>