fix(sounds): de-duplicate notification sounds across browser tabs

src/html/@client/mention-notification.ts

@@ -1,6 +1,12 @@
 import { playSound, stopSound } from './play-sound'
 
 const MENTION_PREFIX = '★ '
+const mentionSoundId = 'sound-mention'
+
+// Only one tab plays the mention sound, and every tab shows the star — so reading the
+// chat in one tab has to clear the others too. It matters most for the sound: that
+// clip is ~6s, where the rest are ~1.5s.
+const channel = 'BroadcastChannel' in globalThis ? new BroadcastChannel('tf2pickup-mention') : null
 
 let hasMention = false
 
@@ -34,25 +40,29 @@ function setMention(event: CustomEvent<{ volume: number }>) {
   }
 
   hasMention = true
-  playSound(document.getElementById('sound-mention'), event.detail.volume)
+  playSound(document.getElementById(mentionSoundId), event.detail.volume)
 
   chatTabButton()?.classList.add('has-mention')
   applyMentionTitle()
 }
 
 function clearMention() {
   hasMention = false
-  stopSound(document.getElementById('sound-mention'))
+  stopSound(document.getElementById(mentionSoundId))
   chatTabButton()?.classList.remove('has-mention')
   clearMentionTitle()
 }
 
 function maybeClear() {
   if (hasMention && isUserReadingChat()) {
     clearMention()
+    channel?.postMessage('cleared')
   }
 }
 
+// BroadcastChannel does not echo to the sender, so this cannot loop back.
+channel?.addEventListener('message', clearMention)
+
 // Re-apply prefix if SetTitle overwrites document.title while mentioned
 const titleObserver = new MutationObserver(() => {
   if (hasMention) {

src/html/@client/play-exclusively.ts

@@ -0,0 +1,21 @@
+// Every open tab holds its own websocket, so without coordination a player with N
+// tabs hears the same notification N times. Tabs race for a Web Lock keyed by the
+// sound and only the winner plays.
+//
+// The lock is held briefly after playing so that tabs reacting to the same websocket
+// message lose the race, while a notification arriving later still gets through.
+const holdMs = 250
+
+export async function playExclusively(soundId: string, play: () => void) {
+  // Older Safari has no Web Locks; fall back to every tab playing, as before.
+  if (!('locks' in navigator)) {
+    play()
+    return
+  }
+
+  await navigator.locks.request(soundId, { ifAvailable: true }, async lock => {
+    if (!lock) return
+    play()
+    await new Promise(resolve => setTimeout(resolve, holdMs))
+  })
+}

src/html/@client/play-sound.ts

@@ -1,5 +1,6 @@
 import htmx from './htmx'
 import { Howl, Howler } from 'howler'
+import { playExclusively } from './play-exclusively'
 
 interface HtmxNodeInternalData {
   sound?: Howl
@@ -19,19 +20,22 @@ function loadSound(element: Element) {
   internalData.sound = new Howl({ src: [src] })
 }
 
-async function resumeAndPlay(sound: Howl) {
+async function resumeAndPlay(sound: Howl, soundId: string) {
   if (Howler.ctx.state === 'suspended') {
     await Howler.ctx.resume().catch(console.warn)
   }
-  sound.play()
+  // Resuming first means a tab that cannot unlock its audio context drops out before
+  // racing for the sound, instead of winning it and swallowing the notification.
+  if (Howler.ctx.state !== 'running') return
+  await playExclusively(soundId, () => sound.play())
 }
 
 export function playSound(element: Element | null, volume?: number) {
-  if (!element) return
+  if (!element?.id) return
   const sound = api.getInternalData(element).sound
   if (!sound) return
   if (volume !== undefined) sound.volume(volume)
-  void resumeAndPlay(sound)
+  void resumeAndPlay(sound, element.id)
 }
 
 export function stopSound(element: Element | null) {