index.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>OpenSheetMusicDisplay Demo</title>
  6. <meta name="description" content="A showcase for OpenSheetMusicDisplay.">
  7. <meta name="author" content="OpenSheetMusicDisplay contributors">
  8. <!-- Include opensheetmusicdisplay -->
  9. <script src="osmd-demo.js"></script>
  10. <!-- Include code and styles for this demo -->
  11. <script src="demo.js"></script>
  12. <link href="demo.css" media="all" rel="stylesheet" />
  13. </head>
  14. <body>
  15. <h1>OpenSheetMusicDisplay Demo</h1>
  16. <table cellspacing="0">
  17. <tr>
  18. <td class="bignum">1</td>
  19. <td>
  20. <p>
  21. Select a sample from the list below...
  22. </p>
  23. <select id="select"></select>
  24. <p>... or just drop your MusicXML file on this page.</p>
  25. </td>
  26. </tr>
  27. <tr>
  28. <td class="bignum">2</td>
  29. <td>
  30. <p>Current width: <span id="size-str">???</span>px</p>
  31. <p>Zoom factor: <span id="zoom-str">???</span>%</p>
  32. <p>
  33. Zoom controls:
  34. <input type="button" value="zoom in" id="zoom-in-btn"/>
  35. <input type="button" value="zoom out" id="zoom-out-btn"/>
  36. </p>
  37. <p>Cursor controls:
  38. <input type="button" value="show" id="show-cursor-btn"/>
  39. <input type="button" value="hide" id="hide-cursor-btn"/>
  40. <input type="button" value="next" id="next-cursor-btn"/>
  41. </p>
  42. </td>
  43. </tr>
  44. <tr id="error-tr">
  45. <td></td>
  46. <td id="error-td"></td>
  47. </tr>
  48. </table>
  49. </body>
  50. </html>