-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmxml.html
142 lines (141 loc) · 4.27 KB
/
mxml.html
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
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html>
<head>
<meta charset=utf8>
<title>mxml</title>
<script src="node_modules/jzz/javascript/JZZ.js"></script>
<script src="node_modules/jzz-midi-smf/javascript/JZZ.midi.SMF.js"></script>
<script src="node_modules/jzz-gui-player/javascript/JZZ.gui.Player.js"></script>
<script src="node_modules/jzz-synth-tiny/javascript/JZZ.synth.Tiny.js"></script>
<style>
#menu {width:16em;}
#editor {height:32em;border-style:solid;border-width: 1px;border-color:silver;}
#player {vertical-align: top;}
.cm-editor { height: 100% }
.cm-scroller { overflow: auto }
</style>
</head>
<body>
<h1>mxml <span id="player"></span></h1>
<p>
<span><input id="file" type="file" onchange="load();"></span>
<span><label for="menu">View as:</label> <select id="menu" onchange="onmenu();"></select></span>
<span><button id="down" onclick="download();">Download</button></span>
</p>
<p id="editor"></p>
<script src="mxml.js"></script>
<script>
var menu = document.getElementById('menu');
var down = document.getElementById('down');
var down_link;
var sum = {};
JZZ.synth.Tiny.register('Web Audio');
var player = new JZZ.gui.Player({ at: 'player', link: true });
var editor = new MxmlEditor('editor');
editor.notify = update;
disable();
function disable() {
menu.disabled = true;
down.disabled = true;
}
function enable() {
menu.disabled = false;
down.disabled = false;
}
function add_menu(t, v, b) {
var o = document.createElement('option');
o.text = t; o.value = v;
if (b) {
o.selected = true;
sum.menu = v;
}
menu.add(o);
}
function update(x) {
var k;
for (k of Object.keys(x)) sum[k] = x[k];
down_link = undefined;
for (k = menu.options.length - 1; k >= 0; k--) menu.remove(k);
if (sum.valid) {
if (sum.type == 'partwise' || sum.type == 'timewise') {
add_menu('XML (partwise)', 'part', sum.type == 'partwise' && !sum.mxl);
add_menu('MXL (partwise, compressed)', 'part_m', sum.type == 'partwise' && sum.mxl);
add_menu('XML (timewise)', 'time', sum.type == 'timewise' && !sum.mxl);
add_menu('MXL (timewise, compressed)', 'time_m', sum.type == 'timewise' && sum.mxl);
add_menu('MIDI', 'midi');
}
else if (sum.type == 'opus') {
add_menu('XML (opus)', 'opus', !sum.mxl);
add_menu('MXL (opus, compressed)', 'opus_m', sum.mxl);
}
enable();
}
else {
disable();
}
};
function load() {
var reader = new FileReader();
var file = document.getElementById('file').files[0];
reader.onload = async function(e) {
var x = await editor.loadData(new Uint8Array(e.target.result));
var name = file.name.split('.');
if (name.length > 1) name = name.slice(0, name.length - 1);
x.file = name.join('.');
update(x);
};
reader.readAsArrayBuffer(file);
}
async function download() {
if (down_link) {
document.body.appendChild(down_link);
down_link.click();
document.body.removeChild(down_link);
}
else {
down_link = document.createElement('a');
down_link.href = await make_data();
down_link.download = [file_name(), file_ext()].join('.');
download();
}
}
async function make_data() {
var data = editor.getText();
if (sum.mxl) data = String.fromCharCode(...await editor.MXML.zip(new TextEncoder().encode(data)));
var url = 'data:' + mime_type() + ';base64,' + JZZ.lib.toBase64(data);
return url;
}
function file_name() { return sum.file || 'download'; }
function file_ext() { return sum.mxl ? 'mxl' : 'xml'; }
function mime_type() { return sum.mxl ? 'application/vnd.recordare.musicxml' : 'application/vnd.recordare.musicxml+xml'; }
function onmenu() {
var midi;
if (menu.value == 'midi') {
menu.value = sum.menu;
try {
player.stop();
midi = editor.midi();
player.load(midi);
player.setUrl('data:audio/midi;base64,' + JZZ.lib.toBase64(midi.dump()), file_name());
player.enable();
player.play();
}
catch (e) {
player.disable();
alert(e.message);
}
return;
}
down_link = undefined;
sum.mxl = menu.value == 'part_m' || menu.value == 'time_m' || menu.value == 'opus_m';
if (menu.value == 'time' || menu.value == 'time_m') {
if (sum.type == 'partwise') editor.part2time();
}
else if (menu.value == 'part' || menu.value == 'part_m') {
if (sum.type == 'timewise') editor.time2part();
}
sum.menu = menu.value;
}
</script>
</body>
</html>