mute button

index.html

@@ -218,6 +218,23 @@
             cursor: not-allowed;
         }
 
+        .btn-mute {
+            background: rgba(255,255,255,0.15);
+            color: white;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .btn-mute.muted {
+            background: var(--danger);
+        }
+
+        .btn-mute svg {
+            width: 16px;
+            height: 16px;
+        }
+
         /* Panels */
         .panel {
             background: var(--pollen-card);
@@ -491,6 +508,22 @@
                         <button class="btn btn-secondary" id="connectBtn" onclick="connectSignaling()">Connect</button>
                         <button class="btn btn-primary" id="startBtn" onclick="startStream()" disabled>Start</button>
                         <button class="btn btn-danger" id="stopBtn" onclick="stopStream()" disabled>Stop</button>
+                        <button class="btn btn-mute muted" id="muteBtn" onclick="toggleMute()" disabled>
+                            <svg id="micOffIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <line x1="1" y1="1" x2="23" y2="23"></line>
+                                <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
+                                <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
+                                <line x1="12" y1="19" x2="12" y2="23"></line>
+                                <line x1="8" y1="23" x2="16" y2="23"></line>
+                            </svg>
+                            <svg id="micOnIcon" class="hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+                                <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+                                <line x1="12" y1="19" x2="12" y2="23"></line>
+                                <line x1="8" y1="23" x2="16" y2="23"></line>
+                            </svg>
+                            <span id="muteText">Unmute</span>
+                        </button>
                     </div>
                 </div>
             </div>
@@ -587,6 +620,10 @@
         // Latency monitor
         let latencyMonitorId = null;
 
+        // Microphone state
+        let localStream = null;
+        let isMuted = true; // Default to muted
+
         // Export functions
         window.loginToHuggingFace = loginToHuggingFace;
         window.logout = logout;
@@ -595,6 +632,7 @@
         window.stopStream = stopStream;
         window.playSound = playSound;
         window.playSoundPreset = playSoundPreset;
+        window.toggleMute = toggleMute;
 
         document.addEventListener('DOMContentLoaded', () => {
             initAuth();
@@ -775,10 +813,31 @@
             if (!selectedProducerId) return;
             updateStatus('connecting', 'Connecting...');
 
+            // Get microphone access
+            try {
+                localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                // Start muted by default
+                localStream.getAudioTracks().forEach(track => {
+                    track.enabled = false;
+                });
+                isMuted = true;
+                updateMuteButton();
+            } catch (e) {
+                console.warn('Could not access microphone:', e);
+                localStream = null;
+            }
+
             peerConnection = new RTCPeerConnection({
                 iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
             });
 
+            // Add microphone track to peer connection
+            if (localStream) {
+                localStream.getAudioTracks().forEach(track => {
+                    peerConnection.addTrack(track, localStream);
+                });
+            }
+
             peerConnection.ontrack = (e) => {
                 if (e.track.kind === 'video') {
                     const video = document.getElementById('remoteVideo');
@@ -876,12 +935,22 @@
 
             if (peerConnection) peerConnection.close();
             if (dataChannel) dataChannel.close();
+
+            // Stop microphone
+            if (localStream) {
+                localStream.getTracks().forEach(track => track.stop());
+                localStream = null;
+            }
+            isMuted = true;
+            updateMuteButton();
+
             peerConnection = null;
             dataChannel = null;
             currentSessionId = null;
             document.getElementById('remoteVideo').srcObject = null;
             document.getElementById('startBtn').disabled = !selectedProducerId;
             document.getElementById('stopBtn').disabled = true;
+            document.getElementById('muteBtn').disabled = true;
             document.getElementById('robotSelector').classList.remove('hidden');
             enableControls(false);
             updateStatus('connected', 'Connected');
@@ -889,6 +958,35 @@
 
         function enableControls(enabled) {
             document.getElementById('btnPlaySound').disabled = !enabled;
+            document.getElementById('muteBtn').disabled = !enabled || !localStream;
+        }
+
+        function toggleMute() {
+            if (!localStream) return;
+            isMuted = !isMuted;
+            localStream.getAudioTracks().forEach(track => {
+                track.enabled = !isMuted;
+            });
+            updateMuteButton();
+        }
+
+        function updateMuteButton() {
+            const btn = document.getElementById('muteBtn');
+            const micOffIcon = document.getElementById('micOffIcon');
+            const micOnIcon = document.getElementById('micOnIcon');
+            const muteText = document.getElementById('muteText');
+
+            if (isMuted) {
+                btn.classList.add('muted');
+                micOffIcon.classList.remove('hidden');
+                micOnIcon.classList.add('hidden');
+                muteText.textContent = 'Unmute';
+            } else {
+                btn.classList.remove('muted');
+                micOffIcon.classList.add('hidden');
+                micOnIcon.classList.remove('hidden');
+                muteText.textContent = 'Mute';
+            }
         }
 
         // ===================== Robot State =====================