Redo all tap sounds with better volume and tones / remove mp3s

gui/src/components/Preload.tsx

@@ -10,29 +10,6 @@ export function Preload() {
 
       <link rel="preload" href="/videos/autobone.webm" as="video" />
 
-      <link
-        rel="preload"
-        href="/sounds/quick-reset-started-sound.mp3"
-        as="audio"
-      />
-      <link
-        rel="preload"
-        href="/sounds/full-reset-started-sound.mp3"
-        as="audio"
-      />
-      <link
-        rel="preload"
-        href="/sounds/mounting-reset-started-sound.mp3"
-        as="audio"
-      />
-      <link rel="preload" href="/sounds/first-tap.mp3" as="audio" />
-      <link rel="preload" href="/sounds/second-tap.mp3" as="audio" />
-      <link rel="preload" href="/sounds/third-tap.mp3" as="audio" />
-      <link rel="preload" href="/sounds/fourth-tap.mp3" as="audio" />
-      <link rel="preload" href="/sounds/fifth-tap.mp3" as="audio" />
-      <link rel="preload" href="/sounds/end-tap.mp3" as="audio" />
-      <link rel="preload" href="/sounds/tapextrasetup.mp3" as="audio" />
-
       <link
         rel="preload"
         href="/models/tracker.gltf"

gui/src/components/home/ResetButton.tsx

@@ -88,7 +88,8 @@ export function ResetButton({
 
   const maybePlaySoundOnResetStart = () => {
     if (!config?.feedbackSound) return;
-    playSoundOnResetStarted(config?.feedbackSoundVolume);
+    if (type !== ResetType.Yaw)
+      playSoundOnResetStarted(config?.feedbackSoundVolume);
   };
 
   return variant === 'small' ? (

gui/src/hooks/app.ts

@@ -15,6 +15,7 @@ import {
   DeviceDataT,
   ResetResponseT,
   ResetStatus,
+  ResetType,
   RpcMessage,
   StartDataFeedT,
   TrackerDataT,
@@ -118,7 +119,8 @@ export function useProvideAppContext(): AppContext {
     try {
       switch (status) {
         case ResetStatus.STARTED: {
-          playSoundOnResetStarted(config?.feedbackSoundVolume);
+          if (resetType !== ResetType.Yaw)
+            playSoundOnResetStarted(config?.feedbackSoundVolume);
           break;
         }
         case ResetStatus.FINISHED: {

gui/src/sounds/sounds.ts

@@ -1,68 +1,79 @@
-import { fetchResourceUrl } from '@/utils/tauri';
 import { ResetType } from 'solarxr-protocol';
+import Xylophone from './xylophone';
 
-const tapSetupSound1 = new Audio(await fetchResourceUrl('/sounds/first-tap.mp3'));
-const tapSetupSound2 = new Audio(await fetchResourceUrl('/sounds/second-tap.mp3'));
-const tapSetupSound3 = new Audio(await fetchResourceUrl('/sounds/third-tap.mp3'));
-const tapSetupSound4 = new Audio(await fetchResourceUrl('/sounds/fourth-tap.mp3'));
-const tapSetupSound5 = new Audio(await fetchResourceUrl('/sounds/fifth-tap.mp3'));
-const tapSetupSoundEnd = new Audio(await fetchResourceUrl('/sounds/end-tap.mp3'));
-const tapSetupExtraSound = new Audio(
-  await fetchResourceUrl('/sounds/tapextrasetup.mp3')
-);
+const tones = [
+  ['C4', 'E4', 'G4'],
+  ['E4', 'G4', 'C5'],
+  ['G4', 'C5', 'E5'],
+  ['C5', 'E5', 'G5'],
+  ['E5', 'G5', 'C6'],
+  ['G5', 'C6', 'E6'],
+];
 
-function restartAndPlay(audio: HTMLAudioElement, volume: number) {
-  audio.volume = Math.min(1, Math.pow(volume, Math.E) + 0.05);
-  if (audio.paused) {
-    audio.play();
-  } else {
-    audio.currentTime = 0;
-  }
-}
+const xylophone = new Xylophone()
 
-export function playSoundOnResetEnded(resetType: ResetType, volume = 1) {
+export async function playSoundOnResetEnded(resetType: ResetType, volume = 1) {
   switch (resetType) {
     case ResetType.Yaw: {
-      restartAndPlay(tapSetupSound2, volume);
+      xylophone.play({
+        notes: ['C4'],
+        offset: 0.15,
+        type: 'square',
+        volume
+      })
       break;
     }
     case ResetType.Full: {
-      restartAndPlay(tapSetupSound3, volume);
+      xylophone.play({
+        notes: ['C4', 'E4'],
+        offset: 0.15,
+        type: 'square',
+        volume
+      })
       break;
     }
     case ResetType.Mounting: {
-      restartAndPlay(tapSetupSound4, volume);
+      xylophone.play({
+        notes: ['C4', 'E4', 'G4'],
+        offset: 0.15,
+        type: 'square',
+        volume
+      })
       break;
     }
   }
 }
 
-export function playSoundOnResetStarted(volume = 1) {
-  restartAndPlay(tapSetupSound1, volume);
+export async function playSoundOnResetStarted(volume = 1) {
+  await xylophone.play({
+    notes: ['A4'],
+    offset: 0.4,
+    type: 'square',
+    volume
+  })
 }
 
-let lastKnownVolume = 1;
-/* Easter egg */
-tapSetupSoundEnd.onended = () => {
-  if (Math.floor(Math.random() * 12000) !== 0) return;
-  restartAndPlay(tapSetupExtraSound, lastKnownVolume);
-};
-
-const order = [
-  tapSetupSound1,
-  tapSetupSound2,
-  tapSetupSound3,
-  tapSetupSound4,
-  tapSetupSound5,
-  tapSetupSoundEnd,
-  tapSetupSoundEnd,
-  tapSetupSoundEnd,
-];
 let lastTap = 0;
-export function playTapSetupSound(volume = 1) {
-  lastKnownVolume = volume;
-  restartAndPlay(order[lastTap++], volume);
-  if (lastTap >= order.length) {
+export async function playTapSetupSound(volume = 1) {
+  if (Math.floor(Math.random() * 12000) !== 0) {
+    xylophone.play({
+      notes: tones[lastTap],
+      offset: 0.15,
+      type: 'square',
+      volume
+    })
+  }
+  else {
+    xylophone.play({
+      notes: ['D4', 'E4', 'G4', 'E4', 'B4', 'B4', 'A4'],
+      offset: 0.15,
+      length: 1,
+      type: 'sawtooth',
+      volume
+    })
+  }
+  lastTap++;
+  if (lastTap >= tones.length) {
     lastTap = 0;
   }
 }