mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-10-03 00:55:14 -07:00
fix(stories): mute the clip waveform's media element so it can't bleed audio
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.
This commit is contained in:
@@ -82,8 +82,19 @@ function ClipWaveform({
|
|||||||
|
|
||||||
const waveColor = getCSSVar('--accent-foreground');
|
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({
|
const wavesurfer = WaveSurfer.create({
|
||||||
container: waveformRef.current,
|
container: waveformRef.current,
|
||||||
|
media: mediaElement,
|
||||||
waveColor,
|
waveColor,
|
||||||
progressColor: waveColor,
|
progressColor: waveColor,
|
||||||
cursorWidth: 0,
|
cursorWidth: 0,
|
||||||
|
|||||||
Reference in New Issue
Block a user