Add optional compressor

components/AudioPlayer.tsx

@@ -9,6 +9,7 @@ interface AudioPlayerProps {
   inferenceResults: InferenceResult[];
   nowPlayingCallback: (result: InferenceResult, playerTime: number) => void;
   playerIsBehindCallback: (isBehind: boolean) => void;
+  useCompressor: boolean;
 }
 
 /**
@@ -21,6 +22,7 @@ export default function AudioPlayer({
   inferenceResults,
   nowPlayingCallback,
   playerIsBehindCallback,
+  useCompressor,
 }: AudioPlayerProps) {
   const [tonePlayer, setTonePlayer] = useState<Tone.Player>(null);
 
@@ -57,8 +59,15 @@ export default function AudioPlayer({
 
       // Make further load callbacks do nothing.
       player.buffer.onload = () => {};
-    }).toDestination();
+    });
-  }, [tonePlayer, inferenceResults]);
+
+    if (useCompressor) {
+      const compressor = new Tone.Compressor(-30, 3).toDestination();
+      player.connect(compressor);
+    } else {
+      player.toDestination();
+    }
+  }, [tonePlayer, inferenceResults, useCompressor]);
 
   // On play/pause button, play/pause the audio with the tone transport
   useEffect(() => {

pages/index.tsx

@@ -71,6 +71,8 @@ export default function Home() {
   const [nowPlayingResult, setNowPlayingResult] =
     useState<InferenceResult>(null);
 
+  const [useCompressor, setUseCompressor] = useState(false);
+
   // Set the initial seed from the URL if available
   const router = useRouter();
   useEffect(() => {
@@ -115,6 +117,10 @@ export default function Home() {
     if (router.query.seedImageId) {
       setSeedImageId(router.query.seedImageId as string);
     }
+
+    if (router.query.useCompressor) {
+      setUseCompressor(router.query.useCompressor == "true");
+    }
   }, [router.isReady, router.query]);
 
   // Set the app state based on the prompt inputs array
@@ -346,6 +352,7 @@ export default function Home() {
           inferenceResults={inferenceResults}
           nowPlayingCallback={nowPlayingCallback}
           playerIsBehindCallback={playerIsBehindCallback}
+          useCompressor={useCompressor}
         />
 
         <PromptPanel