Web real-time reverb, remove other controls

web/package-lock.json

@@ -8,6 +8,7 @@
       "name": "web",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^2.0.18",
         "@types/node": "20.4.2",
         "@types/react": "18.2.15",
         "@types/react-dom": "18.2.7",
@@ -19,6 +20,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "tailwindcss": "3.3.3",
+        "tone": "^14.7.77",
         "typescript": "5.1.6"
       }
     },
@@ -104,6 +106,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -708,6 +718,18 @@
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
     },
+    "node_modules/automation-events": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-6.0.8.tgz",
+      "integrity": "sha512-OXI9rEbA0LwWr+Tmvka4EHtVHBIVw8KD2NM7fIGjd4dyGnuiM3ULZL+Jlo4aKXZDY98raT4R4rEDOHAbz8Jm9A==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "tslib": "^2.6.1"
+      },
+      "engines": {
+        "node": ">=16.1.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -3611,6 +3633,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/standardized-audio-context": {
+      "version": "25.3.54",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.54.tgz",
+      "integrity": "sha512-1b5YTivCBc52MFlg3yUFdbfQZBb4wyFUjbvzBn6JD1FJM1nd3RTg3ddyGWRT8XVOC0KUwY2h4R9YrqLpQ04JPQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "automation-events": "^6.0.7",
+        "tslib": "^2.6.0"
+      }
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -3909,6 +3941,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tone": {
+      "version": "14.7.77",
+      "resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
+      "integrity": "sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==",
+      "dependencies": {
+        "standardized-audio-context": "^25.1.8",
+        "tslib": "^2.0.1"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -3926,9 +3967,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
-      "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
+      "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",

web/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@types/node": "20.4.2",
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
@@ -20,6 +21,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
+    "tone": "^14.7.77",
     "typescript": "5.1.6"
   }
 }

web/src/app/audio-clip.tsx

@@ -0,0 +1,133 @@
+import * as Tone from "tone";
+import { useState, useRef, useEffect} from "react";
+import { PlayCircleIcon, StopCircleIcon } from '@heroicons/react/24/solid'
+
+
+const SAMPLE_RATE = 32000;
+const REVERB_ROOM = 0.8;
+const GAIN_AMOUNT = -10;
+const LENGTH = 10;
+function AudioClip(props: any) {
+  const [reverbAmount, setReverbAmount] = useState(50);
+  const [playing, setPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+
+  const player = useRef<Tone.Player | null>(null);
+  const reverb = useRef<Tone.Freeverb | null>(null);
+  const gain = useRef<Tone.Gain<"decibels"> | null>(null);
+  // const interval = useRef<any>(null);
+
+
+  useEffect(() => {
+      player.current = new Tone.Player(props.src.filename)
+      reverb.current = new Tone.Freeverb(REVERB_ROOM);
+      gain.current = new Tone.Gain(GAIN_AMOUNT, "decibels");
+
+      player.current.connect(reverb.current);
+      player.current.volume.value = -6;
+      reverb.current.connect(gain.current);
+      gain.current.toDestination();
+
+      player.current.loop = true;
+      player.current.setLoopPoints(0, 10);
+
+
+    }, []);
+
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (player.current) {
+        if (progress >= 100 || !playing) {
+          setProgress(0);
+        } else {
+        setProgress(progress + 1);
+        }
+      }
+    }, 90);
+    return () => clearInterval(interval);
+  }, [playing, progress]);
+
+
+
+  const handleClick = async () => {
+    await Tone.start();
+    if (player.current && player.current.state === "started") {
+      player.current.stop();
+      setPlaying(false);
+
+
+    } else if (player.current && player.current.state === "stopped") {
+      player.current.start();
+      setPlaying(true);
+
+    } else {
+      console.log("player not ready");
+      setPlaying(false);
+    }
+
+  };
+
+
+
+  const handleDownload = async () => {
+    await Tone.start();
+    await Tone.Offline(
+      () => {
+        const offlinePlayer = new Tone.Player(props.src)
+        const offlineReverb = new Tone.Freeverb(REVERB_ROOM)
+        const offlineGain = new Tone.Gain(GAIN_AMOUNT, "decibels").toDestination();
+        offlinePlayer.connect(offlineReverb);
+        offlineReverb.connect(offlineGain);
+        Tone.Transport.start();
+        Tone.Transport.scheduleOnce(() => {
+          Tone.Transport.stop();
+        }, offlinePlayer.buffer.duration);
+      },
+      LENGTH,
+      1,
+      SAMPLE_RATE
+    ).then((renderedBuffer) => {
+      const url = URL.createObjectURL(
+        new Blob([renderedBuffer.getChannelData(0)], { type: "audio/wav" })
+      );
+      const downloadLink = document.createElement("a");
+      downloadLink.href = url;
+      downloadLink.download = "processed_audio.wav";
+      downloadLink.click();
+    });
+  };
+
+  const handleReverbChange = (event: any) => {
+    setReverbAmount(event.target.value);
+    if (reverb.current)
+      reverb.current.wet.value = parseInt(event.target.value) / 100;
+  }
+  let width = `w-[${progress}%]`;
+  return (
+    <div className="flex flex-col justify-center p-5" >
+      <div className="flex items-center">
+        {playing ?
+       <StopCircleIcon className="h-6 w-6 text-blue-500 cursor-pointer mr-2 hover:text-blue-600" onClick={handleClick}/> :
+       <PlayCircleIcon className="h-6 w-6 text-blue-500 cursor-pointer mr-2 hover:text-blue-600" onClick={handleClick}/>
+      }
+        <progress value={progress} max="100"/>
+      </div>
+      <div className="flex justify-around text-gray-500 my-2">
+        <div>{props.src.key}</div>
+        <div>{props.src.bpm}</div>
+      </div>
+      <div className="flex flex-col justify-center my-2">
+        <label className="flex justify-center my-2">Reverb</label>
+        <input className="cursor-pointer" type="range" value={reverbAmount} onChange={handleReverbChange} min={0} max={100}/>
+      </div>
+      <button
+        className="flex items-center justify-center border-2 border-black rounded-lg px-10 py-1 hover:bg-black hover:text-white my-2 dark:bg-gray-800 dark:text-white dark:hover:bg-white dark:hover:text-black"
+        onClick={handleDownload}
+      >
+        Download
+      </button>
+    </div>
+  );
+}
+export default AudioClip;

web/src/app/globals.css

@@ -18,10 +18,21 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
+  background: linear-gradient(to bottom,
       transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
 }
+
+progress[value]::-webkit-progress-value {
+  background-image:
+    -webkit-linear-gradient(-45deg,
+      transparent 33%, rgba(0, 0, 0, .1) 33%,
+      rgba(0, 0, 0, .1) 66%, transparent 66%),
+    -webkit-linear-gradient(top,
+      rgba(255, 255, 255, .25),
+      rgba(0, 0, 0, .25)),
+    -webkit-linear-gradient(left, #09c, #f44);
+
+  border-radius: 2px;
+  background-size: 35px 20px, 100% 100%, 100% 100%;
+}

web/src/app/page.tsx

@@ -1,22 +1,13 @@
 "use client";
 
-import Image from "next/image";
 import { useState } from "react";
+import AudioClip from "./audio-clip";
 
 export default function Home() {
-  const [length, setLength] = useState(10);
-  const [BPM, setBPM] = useState(120);
-  const [style, setStyle] = useState("");
+  const [style, setStyle] = useState("d");
   const [loading, setLoading] = useState(false);
   const [finished, setFinished] = useState(false);
-  const [clips, setClips] = useState<string[]>([]);
-
-  function onLengthChange(e: React.ChangeEvent<HTMLInputElement>) {
-    setLength(Number(e.target.value));
-  }
-  function onBPMChange(e: React.ChangeEvent<HTMLInputElement>) {
-    setBPM(Number(e.target.value));
-  }
+  const [clips, setClips] = useState<Object[]>([]);
 
   function handleStyleClick(style: string) {
     setStyle(style);
@@ -34,7 +25,7 @@ export default function Home() {
       setFinished(true);
       setLoading(false);
       setClips(testClips);
-    }, 3000);
+    }, 1);
   }
 
   function downloadFile(url: string) {
@@ -64,7 +55,7 @@ export default function Home() {
     <main className="flex min-h-screen flex-col items-center">
       <h1 className="text-6xl font-bold text-center mt-10">SoundSauce</h1>
       <div className="flex flex-col items-center justify-center">
-        Your unique flavor
+        Your unique melody flavor
       </div>
       <div className="flex flex-col items-center justify-center m-20 w-full">
         <div>Select a style</div>
@@ -72,11 +63,11 @@ export default function Home() {
           {styles.map((s) => {
             let background = "bg-inherit";
             if (s === style) {
-              background = "bg-white";
+              background = "bg-white dark:text-black";
             }
             return (
               <button
-                className={`flex items-center justify-center border-2 border-white rounded-lg px-4 py-1 hover:bg-white ${background}`}
+                className={`flex items-center justify-center border-2 border-white rounded-lg px-4 py-1 dark:hover:text-black hover:bg-white ${background}`}
                 onClick={() => handleStyleClick(s)}
                 key={s}
               >
@@ -85,32 +76,6 @@ export default function Home() {
             );
           })}
         </div>
-        <div className="flex justify-around w-1/3 m-5">
-          <div className="flex flex-col items-center justify-center">
-            <div>Length</div>
-            <input
-              type="range"
-              min={1}
-              max={20}
-              step={1}
-              value={length}
-              onChange={onLengthChange}
-            />
-            <div>{length} seconds</div>
-          </div>
-          <div className="flex flex-col items-center justify-center">
-            <div>BPM</div>
-            <input
-              type="range"
-              min={60}
-              max={180}
-              step={1}
-              value={BPM}
-              onChange={onBPMChange}
-            />
-            <div>{BPM}</div>
-          </div>
-        </div>
         <button
           className="flex items-center justify-center border-2 border-green-500 rounded-lg px-10 py-1 hover:bg-green-500"
           onClick={handleGenerationStart}
@@ -130,20 +95,6 @@ export default function Home() {
   );
 }
 
-function AudioClip(props: any) {
-  return (
-    <div className="flex flex-col justify-center p-5">
-      <audio controls src={props.src} />
-      <button
-        className="flex items-center justify-center border-2 border-black rounded-lg px-10 py-1 mt-2 hover:bg-black hover:text-white"
-        onClick={() => props.downloadFile(props.src)}
-      >
-        Download
-      </button>
-    </div>
-  );
-}
-
 let styles = [
   "Travis Scott",
   "Drake",
@@ -154,7 +105,22 @@ let styles = [
 ];
 
 let testClips = [
-  "./test-clips/chipmunk.wav",
-  "./test-clips/chipmunk.wav",
-  "./test-clips/chipmunk.wav",
+  {
+    filename: "./test-clips/chipmunk.wav",
+    key: "G Maj",
+    bpm: 120,
+    length: 10,
+  },
+  {
+    filename: "./test-clips/skibidi-toilet.mp3",
+    key: "A Min",
+    bpm: 144,
+    length: 11.5,
+  },
+  {
+    filename: "./test-clips/chipmunk.wav",
+    key: "G Maj",
+    bpm: 120,
+    length: 10
+  },
 ];