add touch events

Author: mark-mxwl

package-lock.json

@@ -2,7 +2,7 @@
   "name": "freqy",
   "description": "Multimode filter built with Web Audio.",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite --port 5002 --strictPort",

package.json

@@ -8,24 +8,6 @@ import "./App.css";
 const ctx = new AudioContext();
 const reader1 = new FileReader();
 const filter = ctx.createBiquadFilter();
-const filterTypes = [
-  {
-    type: "lowpass",
-    q: 4,
-  },
-  {
-    type: "highpass",
-    q: 4,
-  },
-  {
-    type: "bandpass",
-    q: 0.7,
-  },
-  {
-    type: "notch",
-    q: 0.7,
-  },
-];
 filter.connect(ctx.destination);
 
 let currentBuffer;
@@ -59,6 +41,25 @@ export default function App() {
   const handleModal = () => setIsVisible(true);
   const handleClick = (e) => setN(e.target.value);
 
+  const filterTypes = [
+    {
+      type: "lowpass",
+      q: 4,
+    },
+    {
+      type: "highpass",
+      q: 4,
+    },
+    {
+      type: "bandpass",
+      q: 0.7,
+    },
+    {
+      type: "notch",
+      q: 0.7,
+    },
+  ];
+
   filter.type = filterTypes[n].type;
   filter.Q.value = filterTypes[n].q;
   filter.frequency.value = freq;

src/App.jsx

@@ -23,7 +23,7 @@ function InfoModal(props) {
       </p>
       <p>
         FILE SELECTOR {">> "}
-        Press any key to select an audio file from your device.
+        Press SPACEBAR or ENTER to select an audio file from your device.
       </p>
       <p>
         MODE {">> "}

src/components/InfoModal.jsx

@@ -67,31 +67,37 @@ export default function Knob(props) {
   }
 
   function mountKnob() {
-    knobRef.current.addEventListener("mousedown", (e) => {
-      center = e.pageY;
-      mouseIsDown = true;
-    });
+    ["mousedown", "touchstart"].forEach((e) => 
+      knobRef.current.addEventListener(e, (e) => {
+        center = e.pageY;
+        mouseIsDown = true;
+      })
+    );
 
-    document.body.addEventListener("mouseup", (e) => {
-      mouseIsDown = false;
-    });
+    ["mouseup", "touchend"].forEach((e) => 
+      document.body.addEventListener(e, (e) => {
+        mouseIsDown = false;
+      })
+    );
 
     knobRef.current.addEventListener("mouseenter", (e) => {
       if (mouseIsDown) {
         mouseIsMoving = true;
       }
     });
 
-    document.body.addEventListener("mousemove", (e) => {
-      mouseIsMoving = true;
-      if (mouseIsDown && mouseIsMoving) {
-        distance = freqClamp((center - e.pageY) * 38, 5000, -4900);
-        knobRef.current.style.transform =
-          "rotate(" + distance / 32 + "deg)";
-        currentValueRef.current.innerHTML = distance + 5000 + "Hz";
-        setFiltFreq(distance + 5000);
-      }
-    });
+    ["mousemove", "touchmove"].forEach((e) =>
+      document.body.addEventListener(e, (e) => {
+        mouseIsMoving = true;
+        if (mouseIsDown && mouseIsMoving) {
+          distance = freqClamp((center - e.pageY) * 38, 5000, -4900);
+          knobRef.current.style.transform =
+            "rotate(" + distance / 32 + "deg)";
+          currentValueRef.current.innerHTML = distance + 5000 + "Hz";
+          setFiltFreq(distance + 5000);
+        }
+      })
+    );
 
     knobRef.current.addEventListener("dblclick", (e) => {
       knobRef.current.style.transform = "rotate(0deg)";