cringe sfx

client/app/composables/use-app.ts

@@ -53,7 +53,7 @@ export const useApp = createGlobalState(() => {
 
     await mediasoup.pauseProducer(mediasoup.micProducer.value)
 
-    sfx.play('/sfx/off_micr.ogg').then()
+    sfx.playEvent('mic-off').then()
     toast.add({ severity: 'info', summary: 'Microphone muted', closable: false, life: 1000 })
   }
 
@@ -67,7 +67,7 @@ export const useApp = createGlobalState(() => {
 
     await mediasoup.resumeProducer(mediasoup.micProducer.value)
 
-    sfx.play('/sfx/on_micr.ogg').then()
+    sfx.playEvent('mic-on').then()
     toast.add({ severity: 'info', summary: 'Microphone activated', closable: false, life: 1000 })
   }
 
@@ -118,22 +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)
+      await sfx.playEvent('stream-on')
     }
     else {
       await mediasoup.disableProducer(mediasoup.videoProducer.value)
-      await sfx.play('/sfx/off_trans.ogg', 0.03)
+      await sfx.playEvent('stream-off')
     }
   }
 
   async function toggleShare() {
     if (!mediasoup.shareProducer.value) {
       await mediasoup.enableShare()
-      await sfx.play('/sfx/on_trans.ogg', 0.03)
+      await sfx.playEvent('stream-on')
     }
     else {
       await mediasoup.disableProducer(mediasoup.shareProducer.value)
-      await sfx.play('/sfx/off_trans.ogg', 0.03)
+      await sfx.playEvent('stream-off')
     }
   }
 

client/app/composables/use-mediasoup.ts

@@ -32,7 +32,7 @@ export const useMediasoup = createSharedComposable(() => {
   const sfx = useSfx()
 
   const signaling = useSignaling()
-  const { addClient, removeClient } = useClients()
+  const { addClient, removeClient, me } = useClients()
   const preferences = usePreferences()
   const { getShareStream } = useDevices()
 
@@ -170,6 +170,9 @@ export const useMediasoup = createSharedComposable(() => {
 
       addClient(...joinedClients)
 
+      if (me.value)
+        sfx.playRandomConnectionSound(me.value.socketId).then()
+
       toast.add({ severity: 'success', summary: 'Joined', closable: false, life: 1000 })
 
       await enableMic()
@@ -202,6 +205,9 @@ export const useMediasoup = createSharedComposable(() => {
           appData: { ...appData, socketId },
         })
 
+        if (kind === 'video')
+          sfx.playEvent('stream-on').then()
+
         if (producerPaused)
           consumer.pause()
 
@@ -221,6 +227,9 @@ export const useMediasoup = createSharedComposable(() => {
         })
 
         consumer.observer.on('close', () => {
+          if (kind === 'video')
+            sfx.playEvent('stream-off').then()
+
           delete consumers.value[consumer.id]
         })
 

client/app/composables/use-sfx.ts

@@ -1,5 +1,5 @@
 import { createSharedComposable } from '@vueuse/core'
-import { Howl, Howler } from 'howler'
+import { Howl } from 'howler'
 
 const CONNECTION_SOUNDS = Object.keys(import.meta.glob('@/../public/sfx/connection/*.ogg')).map(path => path.replace('../public', ''))
 
@@ -13,10 +13,20 @@ function hashStringToNumber(str: string, cap: number): number {
   return Math.abs(hash) % cap
 }
 
+const oneShots: Howl[] = []
+
+type SfxEvent = 'mic-on' | 'mic-off' | 'stream-on' | 'stream-off' | 'connection'
+
+const EVENT_VOLUME: Record<SfxEvent, number> = {
+  'mic-on': 0.2,
+  'mic-off': 0.2,
+  'stream-on': 0.03,
+  'stream-off': 0.03,
+  'connection': 0.1,
+}
+
 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,
@@ -31,13 +41,46 @@ export const useSfx = createSharedComposable(() => {
     })
   }
 
+  async function playOneShot(src: string, volume = 0.2): Promise<void> {
+    for (const oneShot of oneShots) {
+      oneShot.stop()
+    }
+
+    oneShots.length = 0
+
+    return new Promise((resolve) => {
+      const howl = new Howl({
+        src,
+        autoplay: true,
+        loop: false,
+        volume,
+      })
+
+      oneShots.push(howl)
+
+      howl.on('end', () => {
+        resolve()
+      })
+    })
+  }
+
+  async function playEvent(event: SfxEvent) {
+    switch (event) {
+      default:
+        await playOneShot(`/sfx/${event}.ogg`, EVENT_VOLUME[event])
+        break
+    }
+  }
+
   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)
+    await playEvent('stream-on')
+    await play(CONNECTION_SOUNDS[hashStringToNumber(seed, CONNECTION_SOUNDS.length)]!, 0.1)
   }
 
   return {
+    playOneShot,
     play,
     playRandomConnectionSound,
+    playEvent,
   }
 })

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Chad",
-  "version": "0.2.29",
+  "version": "0.2.33",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",