RawJavascript-usage-example/indexSimpler.html at master · opensheetmusicdisplay/RawJavascript-usage-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<head>
	<title> OSMD Raw Javascript Usage Example - Simpler Version</title>
</head>
<body>

<script src="opensheetmusicdisplay.min.js"></script> <!-- you need to provide the .js file, see README.md -->
<div id="osmdCanvas" style="width: 100%"/>

<input type="file" id="fileInput" name="file" formenctype="application/zip"/>

<script>
  var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay("osmdCanvas");
  //osmd.TransposeCalculator = new opensheetmusicdisplay.TransposeCalculator(); // needs OSMD 1.0.0+, better 1.3.0+
  function handleFileSelect(evt) {
    var file = evt.target.files[0];

    if (!file.name.match('.*\.xml') && !file.name.match('.*\.musicxml') && !file.name.match('.*\.mxl')) {
      alert('You selected a non-xml file. Please select only music xml files.');
      return;
    }

    var reader = new FileReader();
    reader.onload = function(e) {
      osmd.load(e.target.result).then(
        function() {
          //console.log("e.target.result: " + e.target.result);
          // osmd.sheet.Transpose = 1;
          osmd.render();
        }
      );
    };
    if (file.name.match('.*\.mxl')) {
      // have to read as binary, otherwise JSZip will throw ("corrupted zip: missing 37 bytes" or similar)
      reader.readAsBinaryString(file);
    } else {
      reader.readAsText(file);
    }
  }

  document.getElementById("fileInput").addEventListener("change", handleFileSelect, false);
</script>

</body>
</html>