forked from yezhiyi9670/musescore-web-display
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathviewer.html
More file actions
132 lines (118 loc) · 5.73 KB
/
viewer.html
File metadata and controls
132 lines (118 loc) · 5.73 KB
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online MuseScore Viewer & Player - View .mscz Files in Browser</title>
<meta name="description" content="View and play MuseScore files (.mscz, .mxl) directly in your browser. Free online viewer with audio playback and sheet music display.">
<meta name="keywords" content="MuseScore viewer, MSCZ player, sheet music online, music notation viewer">
<meta property="og:title" content="Online MuseScore Viewer & Player">
<meta property="og:description" content="Load and play your MuseScore files online. No installation needed.">
<meta property="og:type" content="website">
<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 extension = input.files[0].name.split(".").pop();
const base64score = await fileToBase64(input.files[0]);
document.getElementById("score-container").innerHTML += `
<score-display id="score-display" src="data:.${extension};base64,${base64score}" type="${extension}">
<score-track type="mscz/synth:all">Tutti</score-track>
<score-download href="mscz/export:mscz">Download mscz</score-download>
<score-download href="mscz/export:pdf">Download pdf</score-download>
<score-download href="mscz/export:mxl">Download mxl</score-download>
<score-download href="mscz/export:musicxml">Download MusicXML</score-download>
<score-download href="mscz/export:ogg">Download audio (ogg)</score-download>
</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>
<p style="margin: 0.5rem 0 0 0; color: #666; font-size: 0.95rem;">View and play MuseScore files (.mscz, .mxl, <a href="https://musescore.org/en/handbook/3/file-formats#share-with-other-software">and more</a>) directly in your browser with audio playback</p>
</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,.mscx,.mxl,.musicxml"
onchange="loadFile()" id="file-picker" required="">
<div class="inner-file-area">
<div>
<i class="las la-upload"></i><br/>
Select or drag & drop your MuseScore file<br/>
<small style="color: #999; margin-top: 0.5rem; display: block;">.mscz, .mxl formats supported</small>
</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>