feat: add audio notification with mute toggle on peer join

client/app.ts

@@ -5,6 +5,34 @@ let chat: any = null;
 let userId: string = '';
 let channelHash: string = '';
 let privateKey: string = '';
+let joinAudio: HTMLAudioElement | null = null;
+
+let isMuted: boolean = false;
+
+try {
+    isMuted = localStorage.getItem('mute') === 'true';
+} catch {
+    isMuted = false;
+}
+
+const toggleSoundBtn = document.getElementById('toggle-sound-btn');
+
+if (toggleSoundBtn instanceof HTMLButtonElement) {
+    toggleSoundBtn.textContent = isMuted ? '🔕' : '🔔';
+
+    toggleSoundBtn.addEventListener('click', () => {
+        isMuted = !isMuted;
+
+        try {
+            localStorage.setItem('mute', String(isMuted));
+        } catch (err) {
+            console.warn('Unable to persist mute preference', err);
+        }
+
+        toggleSoundBtn.textContent = isMuted ? '🔕' : '🔔';
+    });
+}
+
 
 // DOM Elements
 // DOM Elements
@@ -41,12 +69,28 @@ const callStatusText = document.getElementById('call-status')!;
 const endCallBtn = document.getElementById('end-call-btn') as HTMLButtonElement;
 const callDuration = document.getElementById('call-duration')!;
 
+
+function playJoinBeep() {
+    if (!joinAudio || isMuted) return;
+
+    try {
+        joinAudio.currentTime = 0;
+        joinAudio.play().catch((err) => {
+            console.warn('Audio playback prevented:',err);
+        });
+    } catch (err) {
+        console.error('Audio play error:', err);
+    }
+}
+
 // Initialize Chat
 async function initChat() {
     try {
         setupStatus.textContent = 'Initializing secure keys...';
         chat = createChatInstance();
         await chat.init();
+        joinAudio = new Audio('/sound/beep.mp3');
+        joinAudio.volume = 0.5;
 
         const keys = chat.getKeyPair();
         privateKey = keys.privateKey;
@@ -183,6 +227,7 @@ function setupChatListeners() {
     chat.on('on-alice-join', () => {
         chatHeader.classList.add('active');
         participantInfo.textContent = 'Peer joined. Communication is encrypted.';
+        playJoinBeep();
     });
 
     chat.on('on-alice-disconnect', () => {

client/index.html

@@ -88,6 +88,8 @@ <h2 id="channel-title">Secure Channel</h2>
                             </path>
                         </svg>
                     </button>
+
+                    <button id="toggle-sound-btn">🔔</button>
                 </div>
             </header>