feat: implementing sounds on click + fixed popping sounds from the playSound

Author: elimanzo

workspaces/simon-game/src/app/components/App.tsx

@@ -1,38 +1,43 @@
 import React from "react";
 import { buttonSoundConfig } from "../constants.ts";
-import playSound from "../util/playSound.ts";
+import { playSound } from "../util/playSound.ts";
 
 import { Box } from "./Box.tsx";
 
 let audioContext: AudioContext | null = null;
 
 export function App() {
+  const handleOnClick = (freq: number) =>
+    playSound(
+      (audioContext ??= new AudioContext()),
+      freq,
+      buttonSoundConfig.duration,
+      buttonSoundConfig.volume,
+    );
+
   return (
-    <div>
-      {buttonSoundConfig.frequencies.map((freq, index) => (
-        <button
-          key={index}
-          onClick={() =>
-            playSound(
-              (audioContext ??= new AudioContext()),
-              freq,
-              buttonSoundConfig.duration,
-              buttonSoundConfig.volume,
-            )
-          }
-        >
-          {freq}
-        </button>
-      ))}
-      <Box color="red" />
+    <div style={{display: "flex", gap: 10}}>
+      <Box
+        color="red"
+        handleClick={() => handleOnClick(buttonSoundConfig.frequencies.red)}
+      />
       <Box
         color={
           // cobalt blue
           "#0050B5"
         }
+        handleClick={() =>
+          handleOnClick(buttonSoundConfig.frequencies.cobaltBlue)
+        }
+      />
+      <Box
+        color="green"
+        handleClick={() => handleOnClick(buttonSoundConfig.frequencies.green)}
+      />
+      <Box
+        color="yellow"
+        handleClick={() => handleOnClick(buttonSoundConfig.frequencies.yellow)}
       />
-      <Box color="green" />
-      <Box color="yellow" />
     </div>
   );
 }

workspaces/simon-game/src/app/components/Box.tsx

@@ -5,18 +5,28 @@ type Props = {
   height?: number;
   width?: number;
   margin?: number;
+  handleClick: () => void;
 };
 
-export function Box(props: Props) {
+export function Box({
+  color = "lightblue",
+  height = 100,
+  width = 100,
+  margin,
+  handleClick,
+}: Props) {
   return (
-    <div
+    <button
       style={{
-        backgroundColor: props.color ?? "lightblue",
-        height: props.height ?? 100,
-        width: props.width ?? 100,
+        backgroundColor: color,
+        height: height,
+        width: width,
         borderRadius: 20, // rounded corners
-        margin: props.margin, // spaces between boxes
+        margin: margin, // spaces between boxes
+        cursor: "pointer",
+        border: 0,
       }}
+      onClick={handleClick}
     />
   );
 }

workspaces/simon-game/src/app/constants.ts

@@ -1,5 +1,10 @@
 export const buttonSoundConfig = {
   duration: 300,
   volume: 0.1,
-  frequencies: [261.63, 329.63, 392.0, 523.25],
+  frequencies: {
+    red: 261.63,
+    cobaltBlue: 329.63,
+    green: 392.0,
+    yellow: 523.25,
+  },
 };

workspaces/simon-game/src/app/util/playSound.ts

@@ -6,12 +6,12 @@
  * @param duration - The duration of the sound in milliseconds.
  * @param volume - The volume of the sound, typically between 0 and 1.
  */
-export default function playSound(
+export const playSound = (
   context: AudioContext,
   frequency: number,
   duration: number,
   volume: number,
-) {
+) => {
   if (frequency <= 0) {
     throw new Error("Frequency must be a positive number.");
   }
@@ -30,9 +30,16 @@ export default function playSound(
   const gainNode = context.createGain();
   gainNode.gain.setValueAtTime(volume, context.currentTime);
 
+  // Creates the smooth fades-in / fade-out sound effect (Avoids the popping sounds)
+  gainNode.gain.linearRampToValueAtTime(volume, context.currentTime + 0.01);
+  gainNode.gain.linearRampToValueAtTime(
+    0,
+    context.currentTime + duration / 1000 - 0.01,
+  );
+
   oscillatorNode.connect(gainNode);
   gainNode.connect(context.destination);
 
   oscillatorNode.start();
   oscillatorNode.stop(context.currentTime + duration / 1000);
-}
+};