refactor

5mdt · Dec 7, 2023 · 16ea81b · 16ea81b
1 parent 024f15c
commit 16ea81b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -29,7 +29,17 @@ To use the 5mdt Noise Generator, simply open the `index.html` file in a web brow
 1. Open the `index.html` file in your web browser.
 2. Click on the "Play Brown Noise," "Play White Noise," or "Play Pink Noise" buttons to start playing the corresponding noise type.
 3. Adjust the volume as needed using the system controls.
-To stop the noise, close the browser tab, or press the "Stop Noise" button.
+   To stop the noise, close the browser tab, or press the "Stop Noise" button.
+
+## Development
+
+Unfortunately due to the separated `index.html` and `RandomNoiseProcessor.js` opening html file in the browser triggers CORS errors. You can serve nginx on a local port with the following command
+
+```bash
+docker run -it --rm -v $PWD:/usr/share/nginx/html/ -p 8081:80 nginx:alpine
+```
+
+- Please use 4 spaces tabulation
 
 ## License
 
@@ -38,6 +48,7 @@ This project is licensed under the [MIT License](LICENSE).
 ## Authors (alphabetically)
 
 - [@akamenskiy](https://github.com/akamenskiy) (JS)
+- [@asyavee](https://github.com/asyavee) (JS)
 - [@kawaiier](https://github.com/kawaiier) (CSS)
 - [@nett00n](https://github.com/nett00n) (Maintainer)
 - [Belka](https://www.behance.net/levichevatn) (Logo)

diff --git a/index.html b/index.html
@@ -113,24 +113,31 @@
         }
     </style>
     <script>
-        let audioContext;
         const types = {
             pink: "pink",
             brown: "brown",
             white: "white",
         }
-        let countdownTimer;
-        let durationInSeconds = 0;
 
-        async function startNoise(type) {
-            const timerInput = document.getElementById("timer");
-            durationInSeconds = getDurationInSeconds(timerInput.value);
+        let audioContext;
+
+        const getUserDurationInputValue = () => {
+            const input = document.getElementById("timer");
+            const duration = getDurationInSeconds(input.value);
+            return duration
+        }
+
 
-            if (durationInSeconds > 0) {
-                startTimer();
+        async function handleStartNoise(type) {
+            if (audioContext) {
+                await stopNoise();
+                stopTimer(timer);
+                return;
             }
 
-            await stopNoise();
+            const durationInSeconds = getUserDurationInputValue();
+            const timer = startTimer(durationInSeconds);
+
             audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 96000 });
             await audioContext.audioWorklet.addModule("RandomNoiseProcessor.js");
             const randomNoiseNode = new AudioWorkletNode(
@@ -145,33 +152,33 @@
             randomNoiseNode.connect(audioContext.destination);
         }
 
+        async function handleStopNoise() {
+            await stopNoise();
+            clearInterval();
+        }
+
         async function stopNoise() {
-            if (audioContext) {
-                await audioContext.close();
-                audioContext = null;
-                stopTimer();
-            }
+            await audioContext.close();
+            audioContext = null;
         }
 
-        function startTimer() {
-            countdownTimer = setInterval(function () {
-                durationInSeconds--;
-                if (durationInSeconds <= 0) {
-                    stopNoise();
+        function startTimer(duration) {
+            const timer = setInterval(() => {
+                duration--;
+                if (duration <= 0) {
+                    handleStopNoise();
+                    clearInterval(timer);
                 }
-                updateTimerInput();
+                updateTimerInput(duration);
             }, 1000);
+            return timer;
         }
 
-        function stopTimer() {
-            clearInterval(countdownTimer);
-        }
-
-        function updateTimerInput() {
+        function updateTimerInput(value) {
             const timerInput = document.getElementById("timer");
-            const hours = Math.floor(durationInSeconds / 3600);
-            const minutes = Math.floor((durationInSeconds % 3600) / 60);
-            const seconds = durationInSeconds % 60;
+            const hours = Math.floor(value / 3600);
+            const minutes = Math.floor((value % 3600) / 60);
+            const seconds = value % 60;
             const formattedTime = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
             timerInput.value = formattedTime;
         }
@@ -197,17 +204,18 @@ <h1>5mdt <br />Noise Generator</h1>
         <main>
             <label for="#timer">Timer (mm:ss):</label>
             <input type="time" id="timer" value="00:00:00">
-            <button onclick="startNoise(types.brown)" id="brown">▶ Brown Noise</button>
-            <button onclick="startNoise(types.pink)" id="pink">▶ Pink Noise</button>
-            <button onclick="startNoise(types.white)" id="white">▶ White Noise</button>
-            <button onclick="stopNoise()" id="stop">⛔ Stop Noise</button>
+            <button onclick="handleStartNoise(types.brown)" id="brown">▶ Brown Noise</button>
+            <button onclick="handleStartNoise(types.pink)" id="pink">▶ Pink Noise</button>
+            <button onclick="handleStartNoise(types.white)" id="white">▶ White Noise</button>
+            <button onclick="handleStopNoise()" id="stop">⛔ Stop Noise</button>
         </main>
 
         <footer>
             <p>There is no tracking, ads or even cookies here. It's absolutely free to use and modify</p>
             <p>Made with pure HTML+CSS+JS</p>
             <p>Authors (alphabetically):</p>
             <p>- <a href="https://github.com/akamenskiy">@akamenskiy</a> (JS)</p>
+            <p>- <a href="https://github.com/asyavee">@asyavee</a> (JS)</p>
             <p>- <a href="https://github.com/kawaiier">@kawaiier</a> (CSS)</p>
             <p>- <a href="https://github.com/nett00n">@nett00n</a> (Maintainer)</p>
             <p>- <a href="https://www.behance.net/levichevatn">Belka</a> (Logo)</p>