Skip to content

feat: Q key toggles browser speaker mute (TTS)#31

Merged
tokk-nv merged 4 commits intoNVIDIA-AI-IOT:mainfrom
tokk-nv:feat/q-mute-browser-tts
Mar 13, 2026
Merged

feat: Q key toggles browser speaker mute (TTS)#31
tokk-nv merged 4 commits intoNVIDIA-AI-IOT:mainfrom
tokk-nv:feat/q-mute-browser-tts

Conversation

@tokk-nv
Copy link
Copy Markdown
Member

@tokk-nv tokk-nv commented Mar 13, 2026

Summary

Adds a keyboard shortcut Q to mute/unmute the browser’s TTS output. The voice pipeline keeps running; only the speaker output is silenced. Useful for demos (e.g. talking over the AI without stopping the session).

Changes

  • app.js
    • New state: browserSpeakerMuted, ttsGainNode.
    • TTS playback goes through a GainNode so muting only affects output, not the pipeline.
    • toggleBrowserSpeakerMute() toggles mute; Q keydown triggers it (ignored when focus is in input/textarea).
  • index.html
    • Shortcut list updated: Q — Mute/unmute browser speaker (TTS); pipeline keeps running.
    • Top right Speaker volume on/off toggle button

How to verify

  1. Start a session with TTS (e.g. Riva TTS).
  2. While TTS is playing, press Q — audio mutes. (Ask AI a question like "Enumerate all the alphabet from A to Z with comma separating each letter.")
  3. Press Q again — audio resumes.
  4. Timeline and pipeline continue; only browser output is muted.

Screenshots

image

tokk-nv added 4 commits March 13, 2026 14:16
- Add browserSpeakerMuted state and ttsGainNode; TTS routes through gain node
- Q shortcut mutes/unmutes TTS output only (pipeline keeps running)
- Document Q in keyboard shortcuts (index.html)

Made-with: Cursor
- Add speaker toggle button left of Gear; shows Speaker on/off state
- Highlight muted state with #bd0f40 (speaker-btn-muted)
- updateSpeakerButton() keeps icon/title in sync with Q key

Made-with: Cursor
- updateSpeakerButton: replace innerHTML so icon updates after Lucide SVG replace
- Q key: use capture phase + stopPropagation so shortcut works
- Speaker-off: filled #bd0f40 background, white icon (stroke)

Made-with: Cursor
- Use timeline-ai purple for header speaker (border when on, fill when off)
- Add speaker toggle in fullscreen-controls over video; show only when fullscreen
- updateSpeakerButton() keeps header and fullscreen button in sync

Made-with: Cursor
@tokk-nv tokk-nv marked this pull request as ready for review March 13, 2026 23:40
@tokk-nv tokk-nv merged commit 14e0db1 into NVIDIA-AI-IOT:main Mar 13, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant