cringe sfx

client/app/composables/use-app.ts

@@ -8,6 +8,7 @@ export const useApp = createGlobalState(() => {
   const mediasoup = useMediasoup()
   const signaling = useSignaling()
   const toast = useToast()
+  const sfx = useSfx()
 
   const ready = ref(false)
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
@@ -52,6 +53,7 @@ export const useApp = createGlobalState(() => {
 
     await mediasoup.pauseProducer(mediasoup.micProducer.value)
 
+    sfx.play('/sfx/off_micr.ogg').then()
     toast.add({ severity: 'info', summary: 'Microphone muted', closable: false, life: 1000 })
   }
 
@@ -65,6 +67,7 @@ export const useApp = createGlobalState(() => {
 
     await mediasoup.resumeProducer(mediasoup.micProducer.value)
 
+    sfx.play('/sfx/on_micr.ogg').then()
     toast.add({ severity: 'info', summary: 'Microphone activated', closable: false, life: 1000 })
   }
 
@@ -115,18 +118,22 @@ export const useApp = createGlobalState(() => {
   async function toggleVideo() {
     if (!mediasoup.videoProducer.value) {
       await mediasoup.enableVideo()
+      await sfx.play('/sfx/on_trans.ogg', 0.03)
     }
     else {
       await mediasoup.disableProducer(mediasoup.videoProducer.value)
+      await sfx.play('/sfx/off_trans.ogg', 0.03)
     }
   }
 
   async function toggleShare() {
     if (!mediasoup.shareProducer.value) {
       await mediasoup.enableShare()
+      await sfx.play('/sfx/on_trans.ogg', 0.03)
     }
     else {
       await mediasoup.disableProducer(mediasoup.shareProducer.value)
+      await sfx.play('/sfx/off_trans.ogg', 0.03)
     }
   }
 

client/app/composables/use-mediasoup.ts

@@ -29,6 +29,7 @@ const ICE_SERVERS: RTCIceServer[] = [
 
 export const useMediasoup = createSharedComposable(() => {
   const toast = useToast()
+  const sfx = useSfx()
 
   const signaling = useSignaling()
   const { addClient, removeClient } = useClients()
@@ -175,6 +176,7 @@ export const useMediasoup = createSharedComposable(() => {
     })
 
     socket.on('newPeer', (client) => {
+      sfx.playRandomConnectionSound(client.socketId).then()
       addClient(client)
     })
 

client/app/composables/use-sfx.ts

@@ -0,0 +1,43 @@
+import { createSharedComposable } from '@vueuse/core'
+import { Howl, Howler } from 'howler'
+
+const CONNECTION_SOUNDS = Object.keys(import.meta.glob('@/../public/sfx/connection/*.ogg')).map(path => path.replace('../public', ''))
+
+console.log('CONNECTION_SOUNDS', CONNECTION_SOUNDS)
+
+function hashStringToNumber(str: string, cap: number): number {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash * 31 + str.charCodeAt(i)) | 0
+  }
+  return Math.abs(hash) % cap
+}
+
+export const useSfx = createSharedComposable(() => {
+  async function play(src: string, volume = 0.2): Promise<void> {
+    Howler.stop()
+
+    return new Promise((resolve) => {
+      const howl = new Howl({
+        src,
+        autoplay: true,
+        loop: false,
+        volume,
+      })
+
+      howl.on('end', () => {
+        resolve()
+      })
+    })
+  }
+
+  async function playRandomConnectionSound(seed: string) {
+    await play('/sfx/on_trans.ogg', 0.03)
+    await play(CONNECTION_SOUNDS[hashStringToNumber(seed, CONNECTION_SOUNDS.length + 1)]!, 0.1)
+  }
+
+  return {
+    play,
+    playRandomConnectionSound,
+  }
+})

client/package.json

@@ -19,6 +19,7 @@
     "@tauri-apps/plugin-updater": "~2",
     "@vueuse/core": "^13.9.0",
     "hotkeys-js": "^4.0.0",
+    "howler": "^2.2.4",
     "lucide-vue-next": "^0.562.0",
     "mediasoup-client": "^3.18.6",
     "nuxt": "^4.2.2",
@@ -37,6 +38,7 @@
     "@antfu/eslint-config": "^5.4.1",
     "@primevue/nuxt-module": "^4.4.0",
     "@tauri-apps/cli": "^2.8.4",
+    "@types/howler": "^2",
     "eslint": "^9.36.0",
     "eslint-plugin-format": "^1.0.2",
     "sass-embedded": "^1.93.2",