musescore-web-display/viewer.html at main · partitioncloud/musescore-web-display · 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MuseScore online viewer</title>
  <script>
    function fileToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = () => {
          const bytes = new Uint8Array(reader.result);
          let binary = '';
          for (let i = 0; i < bytes.byteLength; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          resolve(btoa(binary));
        };
        reader.onerror = err => reject(err);
      });
    }

    async function loadFile() {
      console.log("Loading new file..");
      const input = document.getElementById('file-picker');
      const base64score = await fileToBase64(input.files[0]);

      document.getElementById("score-container").innerHTML += `
        <score-display id="score-display" src="data:.mscz;base64,${base64score}" type="mscz">
          <score-track type="mscz/synth:all">Tutti</score-track>
        </score-display>
      `;

      document.getElementById("restore-viewer").classList.add("hidden");
    };

    function closeFile() {
      document.getElementById("score-container")
        .removeChild(document.getElementById("score-display"));
    }

    document.addEventListener('dragover', (e) => {
      e.preventDefault()
    });

    document.addEventListener('drop', (e) => {
      const dt = new DataTransfer();
      for (const file of e.dataTransfer.files) {
        if (file.type === 'application/x-musescore') {
          dt.items.add(file);
          break;
        }
      }
      // dt.files is a FileList containing the first filtered file
      e.preventDefault();
      if (dt.files.length) {
        const input = document.getElementById('file-picker');
        input.files = dt.files;
        loadFile();
      }
    });

    window.addEventListener("load", (e) => {
      const fileInput = document.getElementsByClassName("file-area")[0]
        .getElementsByTagName("input")[0];

      if (fileInput.files.length == 0) return;

      const filename = fileInput.files[0].name;
      document.getElementById("restore-filename").innerText = filename;
      document.getElementById("restore-viewer").classList.remove("hidden");
    })
  </script>
  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"/>
  <link rel="stylesheet" href="./score-display.css" />
  <link rel="stylesheet" href="./style/index.css" />
  <link rel="stylesheet" href="./style/viewer.css" />
  <script type="module" src="./score-display.rolldown.js"></script>
</head>

<body>
  <div id="root" class="root">
    <div id="header">
      <h1>
        <a class="nav-link" href="https://github.com/partitioncloud/musescore-web-display">
          <svg viewBox="0 0 16 16" class="octicon" aria-hidden="true">
            <path
              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
            </path>
          </svg>
        </a>Online MuseScore viewer & player
      </h1>
    </div>

    <div id="score-container">
      <button id="close-file" onclick="closeFile()"><i class="las la-times"></i></button>
      <div class="file-area">
        <input name="file" type="file" accept=".mscz"
          onchange="loadFile()" id="file-picker" required="">
        <div class="inner-file-area">
          <div>
            <i class="las la-upload"></i><br/>
            Select or drag &amp; drop your file
          </div>
        </div>
      </div>
      <div style="text-align: center">
        <button id="restore-viewer" class="hidden" onclick="loadFile()">
          Restore "<b id="restore-filename"></b>"
        </button>
      </div>
    </div>
  </div>
</body>

</html>