test uuu

public/udest.js

@@ -0,0 +1,91 @@
+const address = document.querySelector('#address').innerHTML
+const socket = new ReconnectingWebSocket(location.origin.replace(/^http/, "ws") + address);
+
+socket.onopen = (event) => {
+    socket.send(JSON.stringify({type:'hello'}))
+}
+
+const join = document.querySelector('#join')
+join.addEventListener('click', ()=>{
+    startPlay()
+    setTimeout(()=>stopPlay(), 250)
+})
+
+const functions = {
+    start_play: (msg) => startPlay(),
+    stop_play: (msg) => stopPlay(),
+    tune: (msg) => tune(msg.freq, msg.gain)
+}
+
+socket.onmessage = (e) => {
+    let message
+
+    try {
+        message = JSON.parse(e.data)
+    } catch (e) {
+        console.log(e)
+    }
+
+    if (!message) return
+    
+    functions[message?.type](message)
+}
+
+
+
+const WIDTH = window.innerWidth
+const HEIGHT = window.innerHeight
+
+const canvas = document.querySelector("#draw")
+const canvasContext = canvas.getContext("2d")
+canvas.width = WIDTH
+canvas.height = HEIGHT
+
+const audioContext = new AudioContext()
+const oscillator = audioContext.createOscillator()
+const gainNode = audioContext.createGain()
+
+
+oscillator.connect(gainNode)
+
+
+const maxFreq = 6000
+const maxVol = 0.2
+const initialVol = 0.001
+
+oscillator.start(0)
+oscillator.detune.value = 100
+
+oscillator.addEventListener('end', () => {
+    console.log("Your tone has stopped")
+})
+
+gainNode.gain.value = initialVol
+gainNode.gain.minValue = initialVol
+gainNode.gain.maxValue = initialVol
+
+let pressed = false
+let cursorX
+let cursorY
+
+
+const startPlay = () => {
+    gainNode.connect(audioContext.destination)
+}
+
+const stopPlay = () => {
+   
+    gainNode.disconnect(audioContext.destination)
+}
+
+const tune = (freq, gain) => {
+
+    oscillator.frequency.value = freq;
+    gainNode.gain.value = gain;
+
+    let x = WIDTH / maxFreq * freq
+    let y = HEIGHT / maxVol * gain
+    canvasContext.fillStyle = "rgb(0,0,0)"
+    canvasContext.fillRect(x, y, 5,5)
+}
+

public/uuu.js

@@ -1,3 +1,28 @@
+
+const address = document.querySelector('#address').innerHTML
+const socket = new ReconnectingWebSocket(location.origin.replace(/^http/, "ws") + address);
+
+
+
+
+const throttle = (fn, delay) => {
+    let lastCalled = 0;
+    return (...args) => {
+        let now = new Date().getTime();
+        if (now - lastCalled < delay) { 
+            return 
+        } 
+        lastCalled = now
+        return fn(...args)
+    }
+}
+
+const sendTune = (freq, gain) => {
+    socket.send(JSON.stringify({type: 'tune', freq: freq.toFixed(2), gain: gain.toFixed(3)}))
+}
+const sendTuneThrottled = throttle(sendTune,100)
+
+
 const WIDTH = window.innerWidth
 const HEIGHT = window.innerHeight
 
@@ -37,11 +62,13 @@ let cursorY
 document.addEventListener("mousedown", ()=>{
     pressed = true
     gainNode.connect(audioContext.destination)
+    socket.send(JSON.stringify({type: 'start_play'}))
 })
 
 document.addEventListener("mouseup", ()=>{
     pressed = false
     gainNode.disconnect(audioContext.destination)
+    socket.send(JSON.stringify({type: 'stop_play'}))
 })
 
 document.addEventListener("mousemove", (e)=>{
@@ -49,14 +76,16 @@ document.addEventListener("mousemove", (e)=>{
     cursorX = e.pageX;
     cursorY = e.pageY;
 
-    oscillator.frequency.value = (cursorX/WIDTH) * maxFreq;
-    gainNode.gain.value = (cursorY/HEIGHT) * maxVol;
-    
+    let gain = cursorY/HEIGHT*maxVol
+    let freq = cursorX/WIDTH*maxFreq
+
+    gainNode.gain.value = gain;
+    oscillator.frequency.value = freq;
 
     if (pressed) {
         canvasContext.fillRect(cursorX, cursorY, 5,5)
         canvasContext.fillStyle = "rgb(0,0,0)"
+        sendTuneThrottled(freq,gain)
     }
 })
 
-

server.js

@@ -28,10 +28,22 @@ const routes = (app) => {
 			address: PREFIX,
 		});
     });
+    app.get("/uuu", (req,res)=>{
+        res.render("uuu", {
+            address: PREFIX,
+        })
+    })
+    app.get("/uuud", (req, res)=>{
+        res.render("uuu_dest", {
+            address: PREFIX,
+        })
+    })
 	app.get("/*", (req, res) => {
 		res.sendFile(req.url, { root: "public" });
 	});
 	return app;
+
+
 };
 
 // Setup the Express server
@@ -56,9 +68,8 @@ var theme = "";
 // In this way to add message types and functionalities gets easier, and avoid long chain of if-else statements.
 
 const messageProcessor = {
-	default: (ws, msg) => unknownMsg(msg),
+	default: (ws, msg) => { unknownMsg(msg); toDest(msg) },
 	hello: (ws, msg) => registerDest(ws, msg),
-    pulse: (ws, msg) => toDest(msg)
 };
 
 // Message processor functions
@@ -66,7 +77,7 @@ const messageProcessor = {
 // Default function, to cactch unkown message types
 const unknownMsg = (msg) => {
 	console.log("Unknown message type...");
-	console.log(msg);
+    console.log(msg);
 };
 
 // Add the ws client in the destinations set

views/uuu.html

@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <title>uuuu</title>
-    <script src="public/uuu.js" defer></script>
+    <script src="{{address}}/uuu.js" defer></script>
+    <script src="{{address}}/wss.js"></script>
     <style>
 
     #draw {
@@ -19,6 +20,8 @@
 </head>
 
 <body>
+
     <canvas id="draw"></canvas>
+        <span id="address">{{address}}</span>
 </body>
 </html>

views/uuu_dest.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>udest</title>
+    <script src="{{address}}/wss.js"></script>
+    <script src="{{address}}/udest.js" defer></script>
+    <style>
+
+    #draw {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        pointer-events: none;
+    }
+
+    </style>
+
+</head>
+
+<body>
+    <canvas id="draw"></canvas>
+
+    <span id="address">{{address}}</span>
+    <button id="join">Join audio</button>
+</body>
+</html>