From d3a44338a2c932da759d00071129500fa2086a37 Mon Sep 17 00:00:00 2001
From: Jamie Pine <32987599+jamiepine@users.noreply.github.com>
Date: Sat, 18 Apr 2026 22:43:59 -0700
Subject: [PATCH] fix(audio): prevent WKWebView audio session teardown after
 backgrounding (#41) (#486)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Keep a silent looping <audio> element mounted at the app root so macOS
never tears down the CoreAudio session. Without this, backgrounding the
app long enough leaves WaveSurfer's AudioContext in a state where play()
resolves and timeupdate fires, but no audio reaches the output — and not
even cmd+R (full JS reload) restores it, only a full app relaunch.

Uses a zero-PCM WAV blob at full volume rather than a muted element,
since WebKit can optimize muted media away and defeat the purpose.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/src/components/AppFrame/AppFrame.tsx      |  2 +
 .../components/AudioPlayer/AudioKeepAlive.tsx | 85 +++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 app/src/components/AudioPlayer/AudioKeepAlive.tsx

diff --git a/app/src/components/AppFrame/AppFrame.tsx b/app/src/components/AppFrame/AppFrame.tsx
index 9c08fb88..8e6c42af 100644
--- a/app/src/components/AppFrame/AppFrame.tsx
+++ b/app/src/components/AppFrame/AppFrame.tsx
@@ -1,5 +1,6 @@
 import { useRouterState } from '@tanstack/react-router';
 import { TitleBarDragRegion } from '@/components/TitleBarDragRegion';
+import { AudioKeepAlive } from '@/components/AudioPlayer/AudioKeepAlive';
 import { AudioPlayer } from '@/components/AudioPlayer/AudioPlayer';
 import { StoryTrackEditor } from '@/components/StoriesTab/StoryTrackEditor';
 import { TOP_SAFE_AREA_PADDING } from '@/lib/constants/ui';
@@ -26,6 +27,7 @@ export function AppFrame({ children }: AppFrameProps) {
       className={cn('h-screen bg-background flex flex-col overflow-hidden', TOP_SAFE_AREA_PADDING)}
     >
       <TitleBarDragRegion />
+      <AudioKeepAlive />
       {children}
       {showTrackEditor ? (
         <StoryTrackEditor storyId={story.id} items={story.items} />
diff --git a/app/src/components/AudioPlayer/AudioKeepAlive.tsx b/app/src/components/AudioPlayer/AudioKeepAlive.tsx
new file mode 100644
index 00000000..f86cc4a1
--- /dev/null
+++ b/app/src/components/AudioPlayer/AudioKeepAlive.tsx
@@ -0,0 +1,85 @@
+import { useEffect, useRef } from 'react';
+import { debug } from '@/lib/utils/debug';
+
+// WKWebView tears down the app's CoreAudio output when idle for long enough,
+// and a JS-level reload (cmd+R) does NOT restore it — only relaunching the
+// Tauri app does. Keeping a silent <audio> element looping forever prevents
+// the OS audio session from ever going dormant.
+//
+// Real silence (zero PCM samples) at full volume is preferred over a muted
+// element: browsers/WebKit can optimize muted media away, which defeats the
+// purpose of holding the session open.
+
+function buildSilentWavUrl(seconds = 1, sampleRate = 8000): string {
+  const numSamples = seconds * sampleRate;
+  const bytes = 44 + numSamples * 2;
+  const buffer = new ArrayBuffer(bytes);
+  const view = new DataView(buffer);
+  const write = (offset: number, str: string) => {
+    for (let i = 0; i < str.length; i++) view.setUint8(offset + i, str.charCodeAt(i));
+  };
+  write(0, 'RIFF');
+  view.setUint32(4, bytes - 8, true);
+  write(8, 'WAVE');
+  write(12, 'fmt ');
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, 1, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * 2, true);
+  view.setUint16(32, 2, true);
+  view.setUint16(34, 16, true);
+  write(36, 'data');
+  view.setUint32(40, numSamples * 2, true);
+  return URL.createObjectURL(new Blob([buffer], { type: 'audio/wav' }));
+}
+
+export function AudioKeepAlive() {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    const url = buildSilentWavUrl(1, 8000);
+    const el = new Audio(url);
+    el.loop = true;
+    el.volume = 1;
+    el.preload = 'auto';
+    audioRef.current = el;
+
+    const tryPlay = () => {
+      if (!audioRef.current) return;
+      if (!audioRef.current.paused) return;
+      audioRef.current.play().catch((err) => {
+        debug.log('[AudioKeepAlive] play blocked (will retry on next gesture):', err);
+      });
+    };
+
+    tryPlay();
+
+    // Autoplay may be blocked until first user interaction — re-attempt then.
+    const onGesture = () => tryPlay();
+    window.addEventListener('pointerdown', onGesture, { once: false });
+    window.addEventListener('keydown', onGesture, { once: false });
+
+    // If the webview ever pauses the element on background, resume on return.
+    const onWake = () => {
+      if (!document.hidden) tryPlay();
+    };
+    document.addEventListener('visibilitychange', onWake);
+    window.addEventListener('focus', onWake);
+    window.addEventListener('pageshow', onWake);
+
+    return () => {
+      window.removeEventListener('pointerdown', onGesture);
+      window.removeEventListener('keydown', onGesture);
+      document.removeEventListener('visibilitychange', onWake);
+      window.removeEventListener('focus', onWake);
+      window.removeEventListener('pageshow', onWake);
+      el.pause();
+      el.src = '';
+      URL.revokeObjectURL(url);
+      audioRef.current = null;
+    };
+  }, []);
+
+  return null;
+}