Spaces:
Running
on
Zero
Running
on
Zero
Commit
•
a71ce75
1
Parent(s):
276900b
Update javascript/app.js
Browse files- javascript/app.js +384 -371
javascript/app.js
CHANGED
@@ -1,187 +1,207 @@
|
|
1 |
function gradioApp() {
|
2 |
-
|
3 |
-
|
4 |
-
|
5 |
}
|
6 |
|
7 |
-
uiUpdateCallbacks = []
|
8 |
-
msgReceiveCallbacks = []
|
9 |
|
10 |
-
function onUiUpdate(callback){
|
11 |
-
|
12 |
}
|
13 |
|
14 |
-
function onMsgReceive(callback){
|
15 |
-
|
16 |
}
|
17 |
|
18 |
-
function runCallback(x, m){
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
}
|
|
|
25 |
function executeCallbacks(queue, m) {
|
26 |
-
|
|
|
|
|
27 |
}
|
28 |
|
29 |
-
document.addEventListener(
|
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 |
function HSVtoRGB(h, s, v) {
|
64 |
-
|
65 |
-
|
66 |
-
|
67 |
-
|
68 |
-
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
75 |
-
|
76 |
-
|
77 |
-
|
78 |
-
|
79 |
-
|
80 |
-
|
81 |
-
|
82 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
83 |
}
|
84 |
|
85 |
-
class MidiVisualizer extends HTMLElement{
|
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 |
-
|
143 |
-
|
144 |
-
|
145 |
-
|
146 |
-
|
147 |
-
|
148 |
-
|
149 |
-
|
150 |
-
|
151 |
-
|
152 |
-
|
153 |
-
|
154 |
-
|
155 |
-
|
156 |
-
|
157 |
-
|
158 |
-
|
159 |
-
|
160 |
-
|
161 |
-
|
162 |
-
|
163 |
-
|
164 |
-
|
165 |
-
|
166 |
-
|
167 |
-
}
|
168 |
-
|
169 |
}
|
|
|
170 |
|
171 |
-
|
172 |
const colors = [
|
173 |
-
|
174 |
-
|
175 |
-
|
176 |
-
|
177 |
-
|
178 |
-
|
179 |
-
|
180 |
-
|
181 |
-
|
182 |
-
|
183 |
-
|
184 |
-
|
185 |
];
|
186 |
|
187 |
// Calculate an index based on the track and channel
|
@@ -192,225 +212,218 @@ class MidiVisualizer extends HTMLElement{
|
|
192 |
|
193 |
// Return the RGB color in the format "rgb(r, g, b)"
|
194 |
return { r, g, b };
|
|
|
195 |
|
|
|
|
|
|
|
196 |
}
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
|
204 |
-
|
205 |
-
|
206 |
-
|
207 |
-
|
208 |
-
|
209 |
-
|
210 |
-
|
211 |
-
|
212 |
-
|
213 |
-
|
214 |
-
|
215 |
-
|
216 |
-
|
217 |
-
|
218 |
-
|
219 |
-
|
220 |
-
|
221 |
-
this.midiTimes.push({ms:ms, t:
|
222 |
-
|
223 |
-
|
224 |
-
|
225 |
-
|
226 |
-
|
227 |
-
|
228 |
-
|
229 |
-
|
230 |
-
|
231 |
-
|
232 |
-
|
233 |
-
|
234 |
-
|
235 |
-
|
236 |
-
|
237 |
-
|
238 |
-
|
239 |
-
|
240 |
-
|
241 |
-
|
242 |
-
|
243 |
-
|
244 |
-
|
245 |
-
|
246 |
-
|
247 |
-
if(midiEvent[0] === "note"){
|
248 |
-
let time = midiEvent[1]
|
249 |
-
let duration = midiEvent[2]
|
250 |
-
let note = midiEvent[midiEvent.length - 1]
|
251 |
-
if(time <=this.playTime && time+duration>= this.playTime){
|
252 |
-
activeNotes.push(note)
|
253 |
-
}
|
254 |
-
}
|
255 |
-
})
|
256 |
-
this.addActiveNotes(activeNotes)
|
257 |
-
}
|
258 |
-
}
|
259 |
-
|
260 |
-
setPlayTimeMs(ms){
|
261 |
-
this.playTimeMs = ms
|
262 |
-
let playTime = 0
|
263 |
-
for(let i =0;i<this.midiTimes.length;i++){
|
264 |
-
let midiTime = this.midiTimes[i]
|
265 |
-
if(midiTime.ms>=ms){
|
266 |
-
break;
|
267 |
-
}
|
268 |
-
playTime = midiTime.t + (ms-midiTime.ms) * this.tickPreBeat / midiTime.tempo
|
269 |
}
|
270 |
-
|
271 |
-
|
272 |
-
|
273 |
-
addActiveNotes(notes){
|
274 |
-
notes.forEach((note)=>{
|
275 |
-
this.activeNotes.push(note)
|
276 |
-
note.classList.add('active');
|
277 |
-
});
|
278 |
-
}
|
279 |
-
|
280 |
-
removeActiveNotes(notes){
|
281 |
-
notes.forEach((note)=>{
|
282 |
-
let idx = this.activeNotes.indexOf(note)
|
283 |
-
if(idx>-1)
|
284 |
-
this.activeNotes.splice(idx, 1);
|
285 |
-
note.classList.remove('active');
|
286 |
-
});
|
287 |
}
|
288 |
-
|
289 |
-
|
290 |
-
|
291 |
-
|
292 |
-
|
293 |
-
|
294 |
-
|
295 |
-
|
296 |
-
|
297 |
-
|
298 |
-
|
299 |
-
this.removeActiveNotes(this.activeNotes)
|
300 |
-
this.timer = null;
|
301 |
-
this.playing = false;
|
302 |
}
|
|
|
|
|
303 |
|
|
|
|
|
|
|
|
|
|
|
|
|
304 |
|
305 |
-
|
306 |
-
|
307 |
-
|
308 |
-
|
309 |
-
|
310 |
-
|
311 |
-
|
312 |
-
|
313 |
-
|
314 |
-
|
315 |
-
|
316 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
317 |
}
|
318 |
|
319 |
customElements.define('midi-visualizer', MidiVisualizer);
|
320 |
|
321 |
-
(()
|
322 |
-
|
323 |
-
|
324 |
-
|
325 |
-
|
326 |
-
|
327 |
-
|
328 |
-
|
329 |
-
|
330 |
-
|
331 |
-
|
332 |
-
|
333 |
-
|
334 |
-
|
335 |
-
|
336 |
-
|
337 |
-
|
338 |
-
|
339 |
-
|
340 |
-
|
341 |
-
|
342 |
-
|
343 |
-
|
344 |
-
|
345 |
-
|
346 |
-
|
347 |
-
}
|
348 |
-
let midi_audio = app.querySelector("#midi_audio > audio");
|
349 |
-
if(!!midi_audio && midi_audio_inited!==midi_audio){
|
350 |
-
midi_visualizer.bindAudioPlayer(midi_audio)
|
351 |
-
midi_audio_inited = midi_audio
|
352 |
-
}
|
353 |
-
})
|
354 |
-
|
355 |
-
function createProgressBar(progressbarContainer){
|
356 |
-
let parentProgressbar = progressbarContainer.parentNode;
|
357 |
-
let divProgress = document.createElement('div');
|
358 |
-
divProgress.className='progressDiv';
|
359 |
-
let rect = progressbarContainer.getBoundingClientRect();
|
360 |
-
divProgress.style.width = rect.width + "px";
|
361 |
-
divProgress.style.background = "#b4c0cc";
|
362 |
-
divProgress.style.borderRadius = "8px";
|
363 |
-
let divInner = document.createElement('div');
|
364 |
-
divInner.className='progress';
|
365 |
-
divInner.style.color = "white";
|
366 |
-
divInner.style.background = "#0060df";
|
367 |
-
divInner.style.textAlign = "right";
|
368 |
-
divInner.style.fontWeight = "bold";
|
369 |
-
divInner.style.borderRadius = "8px";
|
370 |
-
divInner.style.height = "20px";
|
371 |
-
divInner.style.lineHeight = "20px";
|
372 |
-
divInner.style.paddingRight = "8px"
|
373 |
-
divInner.style.width = "0%";
|
374 |
-
divProgress.appendChild(divInner);
|
375 |
-
parentProgressbar.insertBefore(divProgress, progressbarContainer);
|
376 |
}
|
377 |
-
|
378 |
-
|
379 |
-
|
380 |
-
|
381 |
-
parentProgressbar.removeChild(divProgress);
|
382 |
}
|
383 |
-
|
384 |
-
|
385 |
-
|
386 |
-
|
387 |
-
|
388 |
-
|
389 |
-
|
390 |
-
|
391 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
392 |
}
|
393 |
-
|
394 |
-
|
395 |
-
switch (msg.name) {
|
396 |
-
case "visualizer_clear":
|
397 |
-
midi_visualizer.clearMidiEvents();
|
398 |
-
createProgressBar(midi_visualizer_container_inited)
|
399 |
-
break;
|
400 |
-
case "visualizer_append":
|
401 |
-
midi_visualizer.appendMidiEvent(msg.data);
|
402 |
-
break;
|
403 |
-
case "progress":
|
404 |
-
let progress = msg.data[0]
|
405 |
-
let total = msg.data[1]
|
406 |
-
setProgressBar(midi_visualizer_container_inited, progress, total)
|
407 |
-
break;
|
408 |
-
case "visualizer_end":
|
409 |
-
midi_visualizer.finishAppendMidiEvent()
|
410 |
-
midi_visualizer.setPlayTime(0);
|
411 |
-
removeProgressBar(midi_visualizer_container_inited);
|
412 |
-
break;
|
413 |
-
default:
|
414 |
-
}
|
415 |
-
})
|
416 |
-
})();
|
|
|
1 |
function gradioApp() {
|
2 |
+
const elems = document.getElementsByTagName('gradio-app');
|
3 |
+
const gradioShadowRoot = elems.length === 0 ? null : elems[0].shadowRoot;
|
4 |
+
return !!gradioShadowRoot ? gradioShadowRoot : document;
|
5 |
}
|
6 |
|
7 |
+
const uiUpdateCallbacks = [];
|
8 |
+
const msgReceiveCallbacks = [];
|
9 |
|
10 |
+
function onUiUpdate(callback) {
|
11 |
+
uiUpdateCallbacks.push(callback);
|
12 |
}
|
13 |
|
14 |
+
function onMsgReceive(callback) {
|
15 |
+
msgReceiveCallbacks.push(callback);
|
16 |
}
|
17 |
|
18 |
+
function runCallback(x, m) {
|
19 |
+
try {
|
20 |
+
x(m);
|
21 |
+
} catch (e) {
|
22 |
+
(console.error || console.log).call(console, e.message, e);
|
23 |
+
}
|
24 |
}
|
25 |
+
|
26 |
function executeCallbacks(queue, m) {
|
27 |
+
queue.forEach(function (x) {
|
28 |
+
runCallback(x, m);
|
29 |
+
});
|
30 |
}
|
31 |
|
32 |
+
document.addEventListener('DOMContentLoaded', function () {
|
33 |
+
const mutationObserver = new MutationObserver(function (m) {
|
34 |
+
executeCallbacks(uiUpdateCallbacks, m);
|
35 |
+
});
|
36 |
+
mutationObserver.observe(gradioApp(), { childList: true, subtree: true });
|
37 |
});
|
38 |
|
39 |
+
(function () {
|
40 |
+
let mse_receiver_inited = null;
|
41 |
+
onUiUpdate(() => {
|
42 |
+
const app = gradioApp();
|
43 |
+
const msg_receiver = app.querySelector('#msg_receiver');
|
44 |
+
if (!!msg_receiver && mse_receiver_inited !== msg_receiver) {
|
45 |
+
const mutationObserver = new MutationObserver(function (ms) {
|
46 |
+
ms.forEach((m) => {
|
47 |
+
m.addedNodes.forEach((node) => {
|
48 |
+
if (node.nodeName === 'P') {
|
49 |
+
const obj = JSON.parse(node.innerText);
|
50 |
+
if (obj instanceof Array) {
|
51 |
+
obj.forEach((o) => {
|
52 |
+
executeCallbacks(msgReceiveCallbacks, o);
|
53 |
+
});
|
54 |
+
} else {
|
55 |
+
executeCallbacks(msgReceiveCallbacks, obj);
|
56 |
+
}
|
57 |
+
}
|
58 |
+
});
|
59 |
+
});
|
60 |
+
});
|
61 |
+
mutationObserver.observe(msg_receiver, {
|
62 |
+
childList: true,
|
63 |
+
subtree: true,
|
64 |
+
characterData: true,
|
65 |
+
});
|
66 |
+
console.log('receiver init');
|
67 |
+
mse_receiver_inited = msg_receiver;
|
68 |
+
}
|
69 |
+
});
|
70 |
+
})();
|
71 |
|
72 |
function HSVtoRGB(h, s, v) {
|
73 |
+
let r, g, b, i, f, p, q, t;
|
74 |
+
i = Math.floor(h * 6);
|
75 |
+
f = h * 6 - i;
|
76 |
+
p = v * (1 - s);
|
77 |
+
q = v * (1 - f * s);
|
78 |
+
t = v * (1 - (1 - f) * s);
|
79 |
+
switch (i % 6) {
|
80 |
+
case 0:
|
81 |
+
(r = v), (g = t), (b = p);
|
82 |
+
break;
|
83 |
+
case 1:
|
84 |
+
(r = q), (g = v), (b = p);
|
85 |
+
break;
|
86 |
+
case 2:
|
87 |
+
(r = p), (g = v), (b = t);
|
88 |
+
break;
|
89 |
+
case 3:
|
90 |
+
(r = p), (g = q), (b = v);
|
91 |
+
break;
|
92 |
+
case 4:
|
93 |
+
(r = t), (g = p), (b = v);
|
94 |
+
break;
|
95 |
+
case 5:
|
96 |
+
(r = v), (g = p), (b = q);
|
97 |
+
break;
|
98 |
+
}
|
99 |
+
return {
|
100 |
+
r: Math.round(r * 255),
|
101 |
+
g: Math.round(g * 255),
|
102 |
+
b: Math.round(b * 255),
|
103 |
+
};
|
104 |
}
|
105 |
|
106 |
+
class MidiVisualizer extends HTMLElement {
|
107 |
+
constructor() {
|
108 |
+
super();
|
109 |
+
this.midiEvents = [];
|
110 |
+
this.activeNotes = [];
|
111 |
+
this.midiTimes = [];
|
112 |
+
this.wrapper = null;
|
113 |
+
this.svg = null;
|
114 |
+
this.timeLine = null;
|
115 |
+
this.config = {
|
116 |
+
noteHeight: 4,
|
117 |
+
beatWidth: 32,
|
118 |
+
};
|
119 |
+
this.tickPreBeat = 500;
|
120 |
+
this.svgWidth = 0;
|
121 |
+
this.playTime = 0;
|
122 |
+
this.playTimeMs = 0;
|
123 |
+
this.colorMap = new Map();
|
124 |
+
this.playing = false;
|
125 |
+
this.timer = null;
|
126 |
+
this.init();
|
127 |
+
}
|
128 |
+
|
129 |
+
init() {
|
130 |
+
this.innerHTML = '';
|
131 |
+
const shadow = this.attachShadow({ mode: 'open' });
|
132 |
+
const style = document.createElement('style');
|
133 |
+
const wrapper = document.createElement('div');
|
134 |
+
style.textContent = '.note.active {stroke: black;stroke-width: 0.75;stroke-opacity: 0.75;}';
|
135 |
+
wrapper.style.overflowX = 'scroll';
|
136 |
+
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
137 |
+
svg.style.height = `${this.config.noteHeight * 128}px`;
|
138 |
+
svg.style.width = `${this.svgWidth}px`;
|
139 |
+
const timeLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
140 |
+
timeLine.style.stroke = 'green';
|
141 |
+
timeLine.style.strokeWidth = 2;
|
142 |
+
shadow.appendChild(style);
|
143 |
+
shadow.appendChild(wrapper);
|
144 |
+
wrapper.appendChild(svg);
|
145 |
+
svg.appendChild(timeLine);
|
146 |
+
this.wrapper = wrapper;
|
147 |
+
this.svg = svg;
|
148 |
+
this.timeLine = timeLine;
|
149 |
+
this.setPlayTime(0);
|
150 |
+
}
|
151 |
+
|
152 |
+
clearMidiEvents() {
|
153 |
+
this.pause();
|
154 |
+
this.midiEvents = [];
|
155 |
+
this.activeNotes = [];
|
156 |
+
this.midiTimes = [];
|
157 |
+
this.colorMap.clear();
|
158 |
+
this.setPlayTime(0);
|
159 |
+
this.playTimeMs = 0;
|
160 |
+
this.svgWidth = 0;
|
161 |
+
this.svg.innerHTML = '';
|
162 |
+
this.svg.style.width = `${this.svgWidth}px`;
|
163 |
+
this.svg.appendChild(this.timeLine);
|
164 |
+
}
|
165 |
+
|
166 |
+
appendMidiEvent(midiEvent) {
|
167 |
+
if (midiEvent instanceof Array && midiEvent.length > 0) {
|
168 |
+
if (midiEvent[0] === 'note') {
|
169 |
+
const t = midiEvent[1];
|
170 |
+
const duration = midiEvent[2];
|
171 |
+
const channel = midiEvent[3];
|
172 |
+
const pitch = midiEvent[4];
|
173 |
+
const velocity = midiEvent[5];
|
174 |
+
const x = (t / this.tickPreBeat) * this.config.beatWidth;
|
175 |
+
const y = (127 - pitch) * this.config.noteHeight;
|
176 |
+
const w = (duration / this.tickPreBeat) * this.config.beatWidth;
|
177 |
+
const h = this.config.noteHeight;
|
178 |
+
this.svgWidth = Math.ceil(Math.max(x + w, this.svgWidth));
|
179 |
+
const color = this.getColor(0, channel);
|
180 |
+
const opacity = (Math.min(1, velocity / 127 + 0.1)).toFixed(2);
|
181 |
+
const rect = this.drawNote(x, y, w, h, `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity})`);
|
182 |
+
midiEvent.push(rect);
|
183 |
+
this.setPlayTime(t);
|
184 |
+
this.wrapper.scrollTo(this.svgWidth - this.wrapper.offsetWidth, 0);
|
185 |
+
}
|
186 |
+
this.midiEvents.push(midiEvent);
|
187 |
+
this.svg.style.width = `${this.svgWidth}px`;
|
|
|
|
|
188 |
}
|
189 |
+
}
|
190 |
|
191 |
+
getColor(track, channel) {
|
192 |
const colors = [
|
193 |
+
[255, 0, 0], // Red
|
194 |
+
[255, 255, 0], // Yellow
|
195 |
+
[0, 128, 0], // Green
|
196 |
+
[0, 255, 255], // Cyan
|
197 |
+
[0, 0, 255], // Blue
|
198 |
+
[255, 192, 203], // Pink
|
199 |
+
[255, 165, 0], // Orange
|
200 |
+
[128, 0, 128], // Purple
|
201 |
+
[128, 128, 128], // Gray
|
202 |
+
[255, 255, 255], // White
|
203 |
+
[255, 215, 0], // Gold
|
204 |
+
[192, 192, 192], // Silver
|
205 |
];
|
206 |
|
207 |
// Calculate an index based on the track and channel
|
|
|
212 |
|
213 |
// Return the RGB color in the format "rgb(r, g, b)"
|
214 |
return { r, g, b };
|
215 |
+
}
|
216 |
|
217 |
+
drawNote(x, y, w, h, fill) {
|
218 |
+
if (!this.svg) {
|
219 |
+
return null;
|
220 |
}
|
221 |
+
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
222 |
+
rect.classList.add('note');
|
223 |
+
rect.setAttribute('fill', fill);
|
224 |
+
// Round values to the nearest integer to avoid partially filled pixels.
|
225 |
+
rect.setAttribute('x', `${Math.round(x)}`);
|
226 |
+
rect.setAttribute('y', `${Math.round(y)}`);
|
227 |
+
rect.setAttribute('width', `${Math.round(w)}`);
|
228 |
+
rect.setAttribute('height', `${Math.round(h)}`);
|
229 |
+
this.svg.appendChild(rect);
|
230 |
+
return rect;
|
231 |
+
}
|
232 |
+
|
233 |
+
finishAppendMidiEvent() {
|
234 |
+
this.pause();
|
235 |
+
const midiEvents = this.midiEvents.sort((a, b) => a[1] - b[1]);
|
236 |
+
let tempo = (60 / 120) * 10 ** 3;
|
237 |
+
let ms = 0;
|
238 |
+
let lastT = 0;
|
239 |
+
this.midiTimes.push({ ms: ms, t: 0, tempo: tempo });
|
240 |
+
midiEvents.forEach((midiEvent) => {
|
241 |
+
const t = midiEvent[1];
|
242 |
+
ms += ((t - lastT) / this.tickPreBeat) * tempo;
|
243 |
+
if (midiEvent[0] === 'set_tempo') {
|
244 |
+
tempo = midiEvent[2];
|
245 |
+
this.midiTimes.push({ ms: ms, t: t, tempo: tempo });
|
246 |
+
}
|
247 |
+
lastT = t;
|
248 |
+
});
|
249 |
+
}
|
250 |
+
|
251 |
+
setPlayTime(t) {
|
252 |
+
this.playTime = t;
|
253 |
+
const x = Math.round((t / this.tickPreBeat) * this.config.beatWidth);
|
254 |
+
this.timeLine.setAttribute('x1', `${x}`);
|
255 |
+
this.timeLine.setAttribute('y1', '0');
|
256 |
+
this.timeLine.setAttribute('x2', `${x}`);
|
257 |
+
this.timeLine.setAttribute('y2', `${this.config.noteHeight * 128}`);
|
258 |
+
this.wrapper.scrollTo(Math.max(0, x - this.wrapper.offsetWidth / 2), 0);
|
259 |
+
|
260 |
+
if (this.playing) {
|
261 |
+
const activeNotes = [];
|
262 |
+
this.removeActiveNotes(this.activeNotes);
|
263 |
+
this.midiEvents.forEach((midiEvent) => {
|
264 |
+
if (midiEvent[0] === 'note') {
|
265 |
+
const time = midiEvent[1];
|
266 |
+
const duration = midiEvent[2];
|
267 |
+
const note = midiEvent[midiEvent.length - 1];
|
268 |
+
if (time <= this.playTime && time + duration >= this.playTime) {
|
269 |
+
activeNotes.push(note);
|
270 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
271 |
}
|
272 |
+
});
|
273 |
+
this.addActiveNotes(activeNotes);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
274 |
}
|
275 |
+
}
|
276 |
+
|
277 |
+
setPlayTimeMs(ms) {
|
278 |
+
this.playTimeMs = ms;
|
279 |
+
let playTime = 0;
|
280 |
+
for (let i = 0; i < this.midiTimes.length; i++) {
|
281 |
+
const midiTime = this.midiTimes[i];
|
282 |
+
if (midiTime.ms >= ms) {
|
283 |
+
break;
|
284 |
+
}
|
285 |
+
playTime = midiTime.t + ((ms - midiTime.ms) * this.tickPreBeat) / midiTime.tempo;
|
|
|
|
|
|
|
286 |
}
|
287 |
+
this.setPlayTime(playTime);
|
288 |
+
}
|
289 |
|
290 |
+
addActiveNotes(notes) {
|
291 |
+
notes.forEach((note) => {
|
292 |
+
this.activeNotes.push(note);
|
293 |
+
note.classList.add('active');
|
294 |
+
});
|
295 |
+
}
|
296 |
|
297 |
+
removeActiveNotes(notes) {
|
298 |
+
notes.forEach((note) => {
|
299 |
+
const idx = this.activeNotes.indexOf(note);
|
300 |
+
if (idx > -1) this.activeNotes.splice(idx, 1);
|
301 |
+
note.classList.remove('active');
|
302 |
+
});
|
303 |
+
}
|
304 |
+
|
305 |
+
play() {
|
306 |
+
this.playing = true;
|
307 |
+
this.timer = setInterval(() => {
|
308 |
+
this.setPlayTimeMs(this.playTimeMs + 10);
|
309 |
+
}, 10);
|
310 |
+
}
|
311 |
+
|
312 |
+
pause() {
|
313 |
+
if (!!this.timer) clearInterval(this.timer);
|
314 |
+
this.removeActiveNotes(this.activeNotes);
|
315 |
+
this.timer = null;
|
316 |
+
this.playing = false;
|
317 |
+
}
|
318 |
+
|
319 |
+
bindAudioPlayer(audio) {
|
320 |
+
this.pause();
|
321 |
+
audio.addEventListener('play', (event) => {
|
322 |
+
this.play();
|
323 |
+
});
|
324 |
+
audio.addEventListener('pause', (event) => {
|
325 |
+
this.pause();
|
326 |
+
});
|
327 |
+
audio.addEventListener('timeupdate', (event) => {
|
328 |
+
this.setPlayTimeMs(event.target.currentTime * 10 ** 3);
|
329 |
+
});
|
330 |
+
}
|
331 |
}
|
332 |
|
333 |
customElements.define('midi-visualizer', MidiVisualizer);
|
334 |
|
335 |
+
(function () {
|
336 |
+
let midi_visualizer_container_inited = null;
|
337 |
+
let midi_audio_inited = null;
|
338 |
+
const midi_visualizer = document.createElement('midi-visualizer');
|
339 |
+
|
340 |
+
if (window.innerWidth < 300) {
|
341 |
+
midi_visualizer.config.noteHeight = 1;
|
342 |
+
midi_visualizer.config.beatWidth = 8;
|
343 |
+
} else if (window.innerWidth < 600) {
|
344 |
+
midi_visualizer.config.noteHeight = 2;
|
345 |
+
midi_visualizer.config.beatWidth = 16;
|
346 |
+
} else if (window.innerWidth < 1280) {
|
347 |
+
midi_visualizer.config.noteHeight = 4;
|
348 |
+
midi_visualizer.config.beatWidth = 32;
|
349 |
+
} else {
|
350 |
+
midi_visualizer.config.noteHeight = 4;
|
351 |
+
midi_visualizer.config.beatWidth = 64;
|
352 |
+
}
|
353 |
+
midi_visualizer.svg.style.height = `${midi_visualizer.config.noteHeight * 128}px`; // Reload svg height
|
354 |
+
|
355 |
+
onUiUpdate((m) => {
|
356 |
+
const app = gradioApp();
|
357 |
+
const midi_visualizer_container = app.querySelector('#midi_visualizer_container');
|
358 |
+
if (!!midi_visualizer_container && midi_visualizer_container_inited !== midi_visualizer_container) {
|
359 |
+
midi_visualizer_container.appendChild(midi_visualizer);
|
360 |
+
midi_visualizer_container_inited = midi_visualizer_container;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
361 |
}
|
362 |
+
const midi_audio = app.querySelector('#midi_audio > audio');
|
363 |
+
if (!!midi_audio && midi_audio_inited !== midi_audio) {
|
364 |
+
midi_visualizer.bindAudioPlayer(midi_audio);
|
365 |
+
midi_audio_inited = midi_audio;
|
|
|
366 |
}
|
367 |
+
});
|
368 |
+
|
369 |
+
function createProgressBar(progressbarContainer) {
|
370 |
+
const parentProgressbar = progressbarContainer.parentNode;
|
371 |
+
const divProgress = document.createElement('div');
|
372 |
+
divProgress.className = 'progressDiv';
|
373 |
+
const rect = progressbarContainer.getBoundingClientRect();
|
374 |
+
divProgress.style.width = rect.width + 'px';
|
375 |
+
divProgress.style.background = '#b4c0cc';
|
376 |
+
divProgress.style.borderRadius = '8px';
|
377 |
+
const divInner = document.createElement('div');
|
378 |
+
divInner.className = 'progress';
|
379 |
+
divInner.style.color = 'white';
|
380 |
+
divInner.style.background = '#0060df';
|
381 |
+
divInner.style.textAlign = 'right';
|
382 |
+
divInner.style.fontWeight = 'bold';
|
383 |
+
divInner.style.borderRadius = '8px';
|
384 |
+
divInner.style.height = '20px';
|
385 |
+
divInner.style.lineHeight = '20px';
|
386 |
+
divInner.style.paddingRight = '8px';
|
387 |
+
divInner.style.width = '0%';
|
388 |
+
divProgress.appendChild(divInner);
|
389 |
+
parentProgressbar.insertBefore(divProgress, progressbarContainer);
|
390 |
+
}
|
391 |
+
|
392 |
+
function removeProgressBar(progressbarContainer) {
|
393 |
+
const parentProgressbar = progressbarContainer.parentNode;
|
394 |
+
const divProgress = parentProgressbar.querySelector('.progressDiv');
|
395 |
+
parentProgressbar.removeChild(divProgress);
|
396 |
+
}
|
397 |
+
|
398 |
+
function setProgressBar(progressbarContainer, progress, total) {
|
399 |
+
const parentProgressbar = progressbarContainer.parentNode;
|
400 |
+
const divProgress = parentProgressbar.querySelector('.progressDiv');
|
401 |
+
const divInner = parentProgressbar.querySelector('.progress');
|
402 |
+
if (total === 0) total = 1;
|
403 |
+
divInner.style.width = `${(progress / total) * 100}%`;
|
404 |
+
divInner.textContent = `${progress}/${total}`;
|
405 |
+
}
|
406 |
+
|
407 |
+
onMsgReceive((msg) => {
|
408 |
+
switch (msg.name) {
|
409 |
+
case 'visualizer_clear':
|
410 |
+
midi_visualizer.clearMidiEvents();
|
411 |
+
createProgressBar(midi_visualizer_container_inited);
|
412 |
+
break;
|
413 |
+
case 'visualizer_append':
|
414 |
+
midi_visualizer.appendMidiEvent(msg.data);
|
415 |
+
break;
|
416 |
+
case 'progress':
|
417 |
+
const progress = msg.data[0];
|
418 |
+
const total = msg.data[1];
|
419 |
+
setProgressBar(midi_visualizer_container_inited, progress, total);
|
420 |
+
break;
|
421 |
+
case 'visualizer_end':
|
422 |
+
midi_visualizer.finishAppendMidiEvent();
|
423 |
+
midi_visualizer.setPlayTime(0);
|
424 |
+
removeProgressBar(midi_visualizer_container_inited);
|
425 |
+
break;
|
426 |
+
default:
|
427 |
}
|
428 |
+
});
|
429 |
+
})();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|