-
Notifications
You must be signed in to change notification settings - Fork 3
/
script.js
101 lines (89 loc) · 3.43 KB
/
script.js
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
const ws = new WebSocket("ws://localhost:8000/key_events");
const tracksPlaying = {};
function pauseAllPlayingTracks() {
Object.entries(tracksPlaying).forEach(([key, audioElement]) => {
audioElement.pause();
const trackProgressBar = document.getElementById(`progress_track_${key}`);
trackProgressBar.classList.add("bg-warning");
});
}
function unpauseAllPlayingTracks() {
Object.entries(tracksPlaying).forEach(([key, audioElement]) => {
audioElement.play();
const trackProgressBar = document.getElementById(`progress_track_${key}`);
trackProgressBar.classList.remove("bg-warning");
});
}
function colorizeTracksKbdElements(colors) {
for (const [i, color] of colors.entries()) {
const trackKbdElement = document.getElementById(`kbd_${i}`);
trackKbdElement.style.backgroundColor = `rgb(${color[0]}, ${color[1]}, ${color[2]}`;
}
}
function startTrack(trackKey, trackAudioElement, trackProgressBar, trackKbdElement) {
tracksPlaying[trackKey] = trackAudioElement;
trackProgressBar.classList.remove("non-playing");
trackProgressBar.textContent = "100%";
trackProgressBar.style.backgroundColor = trackKbdElement.style.backgroundColor;
trackAudioElement.play();
}
function stopTrack(trackKey, trackaudioElement, trackProgressBar) {
trackProgressBar.classList.add("non-playing");
trackaudioElement.pause();
trackaudioElement.currentTime = 0;
trackaudioElement.volume = 1;
trackProgressBar.style.width = '100%';
trackProgressBar.style.backgroundColor = null;
trackProgressBar.textContent = "";
delete tracksPlaying[trackKey];
}
function increaseTrackVolume(trackAudioElement, trackProgressBar) {
if (trackAudioElement.volume + 0.1 <= 1) {
trackAudioElement.volume += 0.1;
trackProgressBar.style["width"] = trackAudioElement.volume * 100 + "%";
trackProgressBar.textContent = trackProgressBar.style["width"];
};
}
function decreaseTrackVolume(trackAudioElement, trackProgressBar) {
if (trackAudioElement.volume - 0.1 > 0) {
trackAudioElement.volume -= 0.1;
trackProgressBar.style["width"] = trackAudioElement.volume * 100 + "%";
trackProgressBar.textContent = trackProgressBar.style["width"];
};
}
ws.addEventListener('message', event => {
const keyEvent = JSON.parse(event.data);
const usbStatus = document.getElementById("usb_status");
if (keyEvent.state === "usb_disconnected") {
usbStatus.textContent = "🔌 🚫";
} else if (keyEvent.state === "usb_connected") {
usbStatus.textContent = "🔌 ✅";
} else if (keyEvent.state === "init") {
colorizeTracksKbdElements(keyEvent.colors);
} else if (keyEvent.state === "pause") {
pauseAllPlayingTracks();
} else if (keyEvent.state === "unpause") {
unpauseAllPlayingTracks();
} else {
const trackProgressBar = document.getElementById(`progress_track_${keyEvent.key}`);
const audioElement = document.getElementById(`track_${keyEvent.key}`);
const kbdElement = document.getElementById(`kbd_${keyEvent.key}`);
if (audioElement === null) {
return;
}
switch (keyEvent.state) {
case "on":
startTrack(keyEvent.key, audioElement, trackProgressBar, kbdElement);
break;
case "off":
stopTrack(keyEvent.key, audioElement, trackProgressBar);
break;
case "vol_up":
increaseTrackVolume(audioElement, trackProgressBar);
break;
case "vol_down":
decreaseTrackVolume(audioElement, trackProgressBar);
break;
}
}
});