From e7846eaf772633a9f6b36b2e6c7eef09cea0c8c4 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Sat, 25 Apr 2026 02:25:37 -0700
Subject: [PATCH] fix(stories): mute the clip waveform's media element so it
 can't bleed audio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The clip waveforms drawn inside each timeline track use WaveSurfer with the default MediaElement backend, which creates an internal <audio> element to drive playback timing. Web Audio in useStoryPlayback is what actually produces sound, but WaveSurfer's element was happily preloading and — after the first user gesture unlocked browser autoplay — playing the source URL through the page output too.

For TTS clips it was masked: they're short, both sources start at the same time, and stopping the BufferSourceNode at pause coincides with the natural end of the audio element. For long imports (a four-minute MP3) the BufferSourceNode stops on pause but WaveSurfer's element keeps going on its own track — which is exactly the "music keeps playing when I pause" symptom.

Hand WaveSurfer a muted <audio> element via the `media` option so the visual still loads peaks but the element itself can never produce sound. preload="metadata" keeps the load lightweight.
---
 app/src/components/StoriesTab/StoryTrackEditor.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/src/components/StoriesTab/StoryTrackEditor.tsx b/app/src/components/StoriesTab/StoryTrackEditor.tsx
index 2ee2e5f6..d96830b8 100644
--- a/app/src/components/StoriesTab/StoryTrackEditor.tsx
+++ b/app/src/components/StoriesTab/StoryTrackEditor.tsx
@@ -82,8 +82,19 @@ function ClipWaveform({
 
     const waveColor = getCSSVar('--accent-foreground');
 
+    // Hand WaveSurfer a muted <audio> element so the MediaElement backend
+    // can never bleed audio. Web Audio is doing the actual playback in
+    // useStoryPlayback; this clip waveform exists purely for the visual.
+    // Without this, long imported clips (MP3 / M4A) end up audible from
+    // wavesurfer's own element on top of the timeline, and that element
+    // doesn't get paused by stopAllSources().
+    const mediaElement = document.createElement('audio');
+    mediaElement.muted = true;
+    mediaElement.preload = 'metadata';
+
     const wavesurfer = WaveSurfer.create({
       container: waveformRef.current,
+      media: mediaElement,
       waveColor,
       progressColor: waveColor,
       cursorWidth: 0,