diff --git a/package-lock.json b/package-lock.json index 4844d66..068490c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "freqy", - "version": "1.1.0", + "version": "1.1.1", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/package.json b/package.json index 89aeefe..0003fa4 100644 --- a/package.json +++ b/package.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", diff --git a/src/App.jsx b/src/App.jsx index 0b250e8..df3864f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -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; diff --git a/src/components/InfoModal.jsx b/src/components/InfoModal.jsx index cbdc770..10ac608 100644 --- a/src/components/InfoModal.jsx +++ b/src/components/InfoModal.jsx @@ -23,7 +23,7 @@ function InfoModal(props) {

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.

MODE {">> "} diff --git a/src/components/Knob.jsx b/src/components/Knob.jsx index 8b029e4..ff7ee8d 100644 --- a/src/components/Knob.jsx +++ b/src/components/Knob.jsx @@ -67,14 +67,18 @@ 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) { @@ -82,16 +86,18 @@ export default function Knob(props) { } }); - 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)";