blob: 23a0714c544076bd72add02da5aadf4babc69929 (
plain) (
tree)
|
|
<!DOCTYPE html>
<html>
<head>
<title>C SYNTH WEB!</title>
</head>
<body>
<input id='slider' style='width: 100%; height: 200px;' type='range'
min='1' max='22000' />
<button onclick='onButtonClick()'>Trigger</button>
<button id='but'>ws</button>
<script>
const ws = new WebSocket('ws://10.0.0.10:9967');
const slider = document.getElementById('slider');
const but = document.getElementById('but')
slider.oninput = function() { ws.send(slider.value); }
but.onmousedown = function() { ws.send('note_on'); };
but.onmouseup = function() { ws.send('note_off'); }
ws.onmessage = function(event) {
console.log('Message from server: ' + event.data);
slider.value = parseInt(event.data);
};
ws.onopen = function() {
console.log('Connected to WebSocket server');
};
ws.onerror = function(error) {
console.error('WebSocket error: ' + error);
};
// Function to send key events
const pressed_map = new Map();
const sendKeyEvent = (eventType, event) => {
if (ws.readyState === WebSocket.OPEN) {
if (event.repeat == true) return;
if (eventType == "keydown") {
if (pressed_map.get(event.key) == true) return;
pressed_map.set(event.key, true)
ws.send("+" + event.key);
} else if (eventType == "keyup") {
pressed_map.set(event.key, false)
ws.send("-" + event.key);
}
// console.log(event);
// ws.send(JSON.stringify({
// type: eventType,
// key: event.key,
// code: event.code,
// keyCode: event.keyCode,
// ctrl: event.ctrlKey,
// shift: event.shiftKey,
// alt: event.altKey,
// meta: event.metaKey
// }));
}
};
document.addEventListener("keydown", (event) => sendKeyEvent("keydown", event));
document.addEventListener("keyup", (event) => sendKeyEvent("keyup", event));
var fps = 60;
function loop() {
//document.getElementById("test").innerText = ;
setTimeout(loop, 1000 / fps);
}
loop();
</script>
</body>
</html>
|
