fix: update sound player

Author: Oskar Widmark

package-lock.json

@@ -16,7 +16,7 @@
     "@mui/material": "^6.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "use-sound": "^5.0.0"
+    "tone": "^15.1.22"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",

package.json

@@ -18,6 +18,7 @@ import {
   sleep,
   sortNameToSortType,
   timeScale,
+  toHz,
 } from './utils';
 import { SideDrawer } from './SideDrawer';
 import {
@@ -35,9 +36,8 @@ import { SortingAlgorithmSelect } from './SortingAlgorithmSelect';
 import { TimeSlider } from './TimeSlider';
 
 type Props = {
-  playSound: () => void;
+  playSound: (params: { frequency: number; duration?: string }) => void;
   stopSounds: () => void;
-  setSoundPitch: (value: number) => void;
 };
 
 class App extends React.Component<Props> {
@@ -272,10 +272,9 @@ class App extends React.Component<Props> {
   playSoundForColumn = (arr: SortValue[], i: number) => {
     if (!this.state.shouldPlaySound) return;
 
-    this.props.setSoundPitch(
-      (arr[i].value * 7) / this.state.settings.columnNbr + 3,
-    );
-    this.props.playSound();
+    this.props.playSound({
+      frequency: toHz(arr[i].value, this.state.settings.columnNbr),
+    });
   };
 
   toggleDisplaySettings = () => {

src/App.tsx

@@ -1,20 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import App from './App';
-import useSound from 'use-sound';
-import triangle from './triangle.mp3';
+import { useSoundPlayer } from './useSoundPlayer';
 
 export function AppWithSound(): React.ReactElement {
-  const [playbackRate, setPlaybackRate] = React.useState(1.0);
-
-  const [play, { stop }] = useSound(triangle, {
-    playbackRate,
+  const { play, stop } = useSoundPlayer({
+    type: 'triangle',
   });
 
-  useEffect(() => {
-    stop();
-  }, [stop]);
-
-  return (
-    <App playSound={play} stopSounds={stop} setSoundPitch={setPlaybackRate} />
-  );
+  return <App playSound={play} stopSounds={stop} />;
 }

src/AppWithSound.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useCallback, RefObject } from 'react';
+import * as Tone from 'tone';
+import { NonCustomOscillatorType } from 'tone/build/esm/source/oscillator/OscillatorInterface';
+
+type PlayParams = {
+  frequency: number;
+  duration?: string;
+};
+
+export function useSoundPlayer({
+  type = 'sine' as NonCustomOscillatorType,
+} = {}) {
+  const synthRef: RefObject<Tone.Synth | null> = useRef(null);
+  const startedRef = useRef(false);
+
+  // create the Synth and connect it to the master output
+  useEffect(() => {
+    const synth = new Tone.Synth({
+      oscillator: { type },
+      envelope: { attack: 0.05, decay: 0, sustain: 1, release: 0.05 },
+    }).toDestination();
+
+    synthRef.current = synth;
+    return () => {
+      synth.dispose();
+    };
+  }, [type]);
+
+  // ensure AudioContext is resumed once on first play
+  const ensureStarted = useCallback(async () => {
+    if (!startedRef.current) {
+      await Tone.start();
+      startedRef.current = true;
+    }
+  }, []);
+
+  const play = useCallback(
+    async ({ frequency }: PlayParams) => {
+      await ensureStarted();
+      const synth = synthRef.current;
+      if (!synth) return;
+
+      // stop any currently playing note
+      synth.triggerRelease();
+
+      // trigger new tone for 2 seconds max
+      synth.triggerAttackRelease(frequency, 2);
+    },
+    [ensureStarted],
+  );
+
+  const stop = useCallback(() => {
+    synthRef.current?.triggerRelease();
+  }, []);
+
+  return { play, stop };
+}

src/triangle.mp3

@@ -59,3 +59,8 @@ export const sortNameToSortType: Record<SortName, string> = {
   [SortName.BitonicSort]: SortType.Comparison,
   [SortName.BullySort]: SortType.Comparison,
 };
+
+// something that sounds good
+export const toHz = (value: number, columnNbr: number) => {
+  return (440 * value) / columnNbr + 200;
+};