@hyperframes/studio 0.8.108 → 0.8.110

package/src/player/components/audioGainApply.test.ts

@@ -0,0 +1,87 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../store/timelineElement";
+import { normalizeClipsLoudness, writeClipGains } from "./audioGainApply";
+
+const clip = (id: string, extra: Partial<TimelineElement> = {}): TimelineElement => ({
+  id,
+  domId: id,
+  tag: "audio",
+  src: `${id}.mp3`,
+  start: 0,
+  duration: 4,
+  track: 0,
+  ...extra,
+});
+
+const volumeLane = JSON.stringify({
+  version: 1,
+  lanes: [{ target: "volume", points: [{ t: 0, v: 0.25 }] }],
+});
+const plan = { targetLufs: -16, projectedLufs: -16, volume: 2, changeDb: 6, limitedBy: null };
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("normalizeClipsLoudness", () => {
+  it("refuses a clip whose volume lane owns its gain, before measuring or writing", async () => {
+    const fetchSpy = vi.fn(async () => Response.json({ plan }));
+    vi.stubGlobal("fetch", fetchSpy);
+    const onSetElementAttributeQuiet = vi.fn(async () => ({ status: "saved" as const }));
+    await expect(
+      normalizeClipsLoudness("p1", [clip("vo", { automation: volumeLane })], {
+        onSetElementAttributeQuiet,
+      }),
+    ).rejects.toThrow(/volume is automated/);
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(onSetElementAttributeQuiet).not.toHaveBeenCalled();
+  });
+
+  it("rejects instead of claiming success when the save fails", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ plan })),
+    );
+    const onSetElementAttributeQuiet = vi.fn(async () => ({
+      status: "failed" as const,
+      reason: "disk full",
+    }));
+    await expect(
+      normalizeClipsLoudness("p1", [clip("vo")], { onSetElementAttributeQuiet }),
+    ).rejects.toThrow("disk full");
+  });
+});
+
+describe("writeClipGains", () => {
+  it("stops at the first refused single save", async () => {
+    const onSetElementAttributeQuiet = vi.fn(async () => ({
+      status: "refused" as const,
+      reason: "Cannot edit timeline while recording",
+    }));
+    await expect(
+      writeClipGains(
+        [
+          { element: clip("a"), gain: 2 },
+          { element: clip("b"), gain: 2 },
+        ],
+        { onSetElementAttributeQuiet },
+      ),
+    ).rejects.toThrow("Cannot edit timeline while recording");
+    expect(onSetElementAttributeQuiet).toHaveBeenCalledTimes(1);
+  });
+
+  it("surfaces a failed multi-clip save", async () => {
+    const onSetElementsAttributeQuiet = vi.fn(async () => ({
+      status: "failed" as const,
+      reason: "disk full",
+    }));
+    await expect(
+      writeClipGains(
+        [
+          { element: clip("a"), gain: 2 },
+          { element: clip("b"), gain: 2 },
+        ],
+        { onSetElementsAttributeQuiet },
+      ),
+    ).rejects.toThrow("disk full");
+  });
+});

package/src/player/components/audioGainApply.ts

@@ -0,0 +1,57 @@
+import { formatAudioGain } from "@hyperframes/core/audio-gain";
+import type { TimelineElement } from "../store/timelineElement";
+import type { TimelineEditCallbacks } from "./timelineCallbacks";
+import {
+  normalizeToastText,
+  requestNormalizePlan,
+  throwUnlessSaved,
+  VOLUME_LANE_REFUSAL,
+  volumeLaneOwnsGain,
+} from "./clipMenuNormalize";
+
+export const AUDIO_GAIN_LABEL = "Audio Gain";
+
+type VolumeWriters = Pick<
+  TimelineEditCallbacks,
+  "onSetElementAttributeQuiet" | "onSetElementsAttributeQuiet"
+>;
+
+/** Every clip's new gain as `data-volume`, one undo step when the host can save them together. */
+export async function writeClipGains(
+  edits: ReadonlyArray<{ element: TimelineElement; gain: number }>,
+  writers: VolumeWriters,
+  label = AUDIO_GAIN_LABEL,
+): Promise<void> {
+  if (edits.some(({ element }) => volumeLaneOwnsGain(element))) {
+    throw new Error(VOLUME_LANE_REFUSAL);
+  }
+  const values = edits.map(({ element, gain }) => ({ element, value: formatAudioGain(gain) }));
+  if (values.length > 1 && writers.onSetElementsAttributeQuiet) {
+    throwUnlessSaved(await writers.onSetElementsAttributeQuiet(values, "data-volume", label));
+    return;
+  }
+  for (const { element, value } of values) {
+    throwUnlessSaved(
+      await writers.onSetElementAttributeQuiet?.(element, "data-volume", value, label),
+    );
+  }
+}
+
+/** Measure each clip against −16 LUFS, write the gains, and say what happened. */
+export async function normalizeClipsLoudness(
+  projectId: string,
+  elements: readonly TimelineElement[],
+  writers: VolumeWriters,
+): Promise<string> {
+  if (elements.some(volumeLaneOwnsGain)) throw new Error(VOLUME_LANE_REFUSAL);
+  const plans = await Promise.all(elements.map((el) => requestNormalizePlan(projectId, el)));
+  await writeClipGains(
+    elements.map((element, index) => ({ element, gain: plans[index]?.volume ?? 1 })),
+    writers,
+    "Normalize loudness",
+  );
+  const [only] = plans;
+  return plans.length === 1 && only
+    ? normalizeToastText(only)
+    : `Normalized ${plans.length} clips to −16 LUFS`;
+}

package/src/player/components/audioGainDialogStore.ts

@@ -0,0 +1,36 @@
+import { create } from "zustand";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { clipHasSound } from "./clipMenuNormalize";
+
+interface AudioGainDialogState {
+  targetKeys: readonly string[] | null;
+  open: (keys: readonly string[]) => void;
+  close: () => void;
+}
+
+/** Which clips the Audio Gain dialog (G) is open for. */
+export const useAudioGainDialogStore = create<AudioGainDialogState>((set) => ({
+  targetKeys: null,
+  open: (keys) => set({ targetKeys: keys }),
+  close: () => set({ targetKeys: null }),
+}));
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+
+/** The selected clips with sound, or just `clicked` when it is outside the selection. */
+function audioGainTargetKeys(clicked?: TimelineElement): string[] {
+  const { elements, selectedElementId, selectedElementIds } = usePlayerStore.getState();
+  const selected = new Set(selectedElementIds);
+  if (selectedElementId) selected.add(selectedElementId);
+  if (clicked && !selected.has(keyOf(clicked)))
+    return clipHasSound(clicked) ? [keyOf(clicked)] : [];
+  return elements.filter((el) => selected.has(keyOf(el)) && clipHasSound(el)).map(keyOf);
+}
+
+/** Open Audio Gain for the selection (or the clicked clip); false when none of it has sound. */
+export function openAudioGainDialog(clicked?: TimelineElement): boolean {
+  const keys = audioGainTargetKeys(clicked);
+  if (keys.length === 0) return false;
+  useAudioGainDialogStore.getState().open(keys);
+  return true;
+}

package/src/player/components/audioGainPlan.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+import { audioGainToDb, MAX_AUDIO_GAIN } from "@hyperframes/core/audio-gain";
+import { peakAmplitudeDb, planAudioGain, type AudioGainClip } from "./audioGainPlan";
+
+const clip = (key: string, gain: number, sourcePeak: number | null): AudioGainClip => ({
+  key,
+  gain,
+  sourcePeak,
+});
+const db = (gain: number | undefined) => audioGainToDb(gain ?? Number.NaN);
+const gainOf = (plan: ReturnType<typeof planAudioGain>, key: string) =>
+  plan.find((edit) => edit.key === key)?.gain;
+
+describe("planAudioGain", () => {
+  it("Set Gain to puts every clip at the same gain", () => {
+    const plan = planAudioGain([clip("a", 2, 0.5), clip("b", 0.5, null)], { mode: "set", db: -6 });
+    expect(db(gainOf(plan, "a"))).toBeCloseTo(-6, 6);
+    expect(db(gainOf(plan, "b"))).toBeCloseTo(-6, 6);
+  });
+
+  it("Adjust Gain by moves each clip by the same dB from where it is", () => {
+    const plan = planAudioGain([clip("a", 2, null), clip("b", 0.5, null)], {
+      mode: "adjust",
+      db: 3,
+    });
+    expect(db(gainOf(plan, "a"))).toBeCloseTo(db(2) + 3, 6);
+    expect(db(gainOf(plan, "b"))).toBeCloseTo(db(0.5) + 3, 6);
+  });
+
+  it("Normalize Max Peak moves all clips together until the loudest peak hits the target", () => {
+    const plan = planAudioGain([clip("loud", 1, 0.5), clip("quiet", 1, 0.25)], {
+      mode: "normalize-max",
+      db: -1,
+    });
+    expect(db(0.5 * (gainOf(plan, "loud") ?? 0))).toBeCloseTo(-1, 6);
+    expect(db(gainOf(plan, "loud")) - db(gainOf(plan, "quiet"))).toBeCloseTo(0, 6);
+  });
+
+  it("Normalize Max Peak counts each clip's current gain", () => {
+    const plan = planAudioGain([clip("a", 0.5, 0.8), clip("b", 2, 0.25)], {
+      mode: "normalize-max",
+      db: -3,
+    });
+    expect(db(0.25 * (gainOf(plan, "b") ?? 0))).toBeCloseTo(-3, 6);
+  });
+
+  it("Normalize All Peaks brings each clip's own peak to the target", () => {
+    const plan = planAudioGain([clip("a", 1, 0.5), clip("b", 3, 0.25)], {
+      mode: "normalize-all",
+      db: -3,
+    });
+    expect(db(0.5 * (gainOf(plan, "a") ?? 0))).toBeCloseTo(-3, 6);
+    expect(db(0.25 * (gainOf(plan, "b") ?? 0))).toBeCloseTo(-3, 6);
+  });
+
+  it("leaves clips it could not measure out of a normalize", () => {
+    const plan = planAudioGain([clip("a", 1, 0.5), clip("b", 1, null), clip("c", 1, 0)], {
+      mode: "normalize-all",
+      db: -1,
+    });
+    expect(plan.map((edit) => edit.key)).toEqual(["a"]);
+  });
+
+  it("clamps to the +12 dB ceiling and to silence", () => {
+    const loud = planAudioGain([clip("a", 1, 0.001)], { mode: "normalize-all", db: 0 });
+    expect(gainOf(loud, "a")).toBe(MAX_AUDIO_GAIN);
+    expect(gainOf(planAudioGain([clip("a", 1, null)], { mode: "set", db: 40 }), "a")).toBe(
+      MAX_AUDIO_GAIN,
+    );
+    expect(gainOf(planAudioGain([clip("a", 0, null)], { mode: "adjust", db: 6 }), "a")).toBe(0);
+  });
+});
+
+describe("peakAmplitudeDb", () => {
+  it("is the loudest peak across the selection at each clip's gain", () => {
+    expect(peakAmplitudeDb([clip("a", 1, 0.5), clip("b", 2, 0.5)])).toBeCloseTo(0, 6);
+  });
+
+  it("is null when nothing was measured", () => {
+    expect(peakAmplitudeDb([clip("a", 1, null)])).toBeNull();
+  });
+});

package/src/player/components/audioGainPlan.ts

@@ -0,0 +1,53 @@
+import { audioDbToGain, audioGainToDb, clampAudioGain } from "@hyperframes/core/audio-gain";
+
+export type AudioGainMode = "set" | "adjust" | "normalize-max" | "normalize-all";
+
+export interface AudioGainChoice {
+  mode: AudioGainMode;
+  db: number;
+}
+
+/** A selected clip: its `data-volume` gain and its source's linear sample peak over the played window. */
+export interface AudioGainClip {
+  key: string;
+  gain: number;
+  sourcePeak: number | null;
+}
+
+export interface AudioGainEdit {
+  key: string;
+  gain: number;
+}
+
+function isMeasured(clip: AudioGainClip): clip is AudioGainClip & { sourcePeak: number } {
+  return clip.sourcePeak !== null && clip.sourcePeak > 0;
+}
+
+const heardPeak = (clip: AudioGainClip & { sourcePeak: number }) => clip.sourcePeak * clip.gain;
+
+/** Premiere's Audio Gain options as new `data-volume` gains, clamped to silence..+12 dB. */
+export function planAudioGain(
+  clips: readonly AudioGainClip[],
+  choice: AudioGainChoice,
+): AudioGainEdit[] {
+  const target = audioDbToGain(choice.db);
+  const edit = (clip: AudioGainClip, gain: number) => ({
+    key: clip.key,
+    gain: clampAudioGain(gain),
+  });
+  if (choice.mode === "set") return clips.map((clip) => edit(clip, target));
+  if (choice.mode === "adjust") return clips.map((clip) => edit(clip, clip.gain * target));
+  const measured = clips.filter(isMeasured);
+  if (choice.mode === "normalize-all") {
+    return measured.map((clip) => edit(clip, target / clip.sourcePeak));
+  }
+  const loudest = Math.max(0, ...measured.map(heardPeak));
+  if (loudest <= 0) return [];
+  return measured.map((clip) => edit(clip, (clip.gain * target) / loudest));
+}
+
+/** The loudest peak the selection plays at its current gains, in dBFS. */
+export function peakAmplitudeDb(clips: readonly AudioGainClip[]): number | null {
+  const loudest = Math.max(0, ...clips.filter(isMeasured).map(heardPeak));
+  return loudest > 0 ? audioGainToDb(loudest) : null;
+}

package/src/player/components/clipMenuAudioItems.noShell.test.tsx

@@ -0,0 +1,86 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "./testRootHarness";
+import { ClipMenuAudioItems } from "./clipMenuAudioItems";
+import { AudioGainDialog } from "./AudioGainDialog";
+import { usePlayerStore } from "../store/playerStore";
+import { usePreviewIframeStore } from "../store/previewIframeStore";
+import type { TimelineElement } from "../store/timelineElement";
+
+const onNotice = vi.fn();
+const setQuiet = vi.fn(async () => {});
+
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContextOptional: () => null,
+}));
+vi.mock("../../contexts/TimelineEditContext", () => ({
+  useTimelineEditContextOptional: () => ({ onSetElementAttributeQuiet: setQuiet, onNotice }),
+}));
+
+const harness = createHappyDomRootHarness();
+const tour: TimelineElement = {
+  id: "tour",
+  tag: "video",
+  start: 0,
+  duration: 4,
+  track: 0,
+  hasAudio: true,
+  src: "tour.mp4",
+};
+
+function mountPreview(): void {
+  const iframe = document.createElement("iframe");
+  document.body.appendChild(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("iframe has no document");
+  doc.body.innerHTML =
+    '<video id="tour" src="tour.mp4" data-has-audio="true" data-start="0" data-duration="4"></video><audio id="voiceover" src="vo.wav" data-start="1" data-duration="2"></audio>';
+  usePreviewIframeStore.getState().setIframe(iframe);
+}
+
+function render(part: "gain" | "duck") {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  act(() =>
+    harness
+      .mount(host)
+      .render(<ClipMenuAudioItems part={part} element={tour} onClose={() => {}} />),
+  );
+  return host;
+}
+
+afterEach(() => {
+  usePreviewIframeStore.getState().setIframe(null);
+  vi.unstubAllGlobals();
+});
+
+describe("ClipMenuAudioItems in a host without Studio's shell", () => {
+  it("offers Audio Gain and Duck from the timeline session and the live preview", () => {
+    usePlayerStore.getState().beginTimelineSession("p1");
+    mountPreview();
+    expect(render("gain").textContent).toContain("Audio Gain…");
+    expect(render("duck").textContent).toContain("Duck under voice");
+  });
+
+  it("the dialog's loudness row normalizes through the session's project and onNotice", async () => {
+    usePlayerStore.getState().beginTimelineSession("p1");
+    const plan = { targetLufs: -16, projectedLufs: -16, volume: 2, changeDb: 6, limitedBy: null };
+    const fetchSpy = vi.fn(async (_url: string) => Response.json({ plan }));
+    vi.stubGlobal("fetch", fetchSpy);
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    act(() => harness.mount(host).render(<AudioGainDialog elements={[tour]} onClose={() => {}} />));
+    const loudness = [...document.querySelectorAll("label")].find((l) =>
+      l.textContent?.includes("−16 LUFS"),
+    );
+    act(() => loudness?.querySelector("input")?.click());
+    const ok = [...document.querySelectorAll("button")].find((b) => b.textContent === "OK");
+    await act(async () => ok?.click());
+    await vi.waitFor(() => expect(onNotice).toHaveBeenCalled());
+    const urls = fetchSpy.mock.calls.map((call) => String(call[0]));
+    expect(urls).toContain("/api/projects/p1/loudness/normalize");
+    expect(setQuiet).toHaveBeenCalledWith(tour, "data-volume", "2", "Normalize loudness");
+    expect(onNotice).toHaveBeenCalledWith("Normalized to −16 LUFS (+6.0 dB)", "info");
+  });
+});

package/src/player/components/clipMenuAudioItems.test.tsx

@@ -4,10 +4,16 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { createHappyDomRootHarness } from "./testRootHarness";
 import { ClipMenuAudioItems } from "./clipMenuAudioItems";
 import type { TimelineElement } from "../store/timelineElement";
+import { useAudioGainDialogStore } from "./audioGainDialogStore";
 
 const showToast = vi.fn();
 const setQuiet = vi.fn<(...args: unknown[]) => Promise<unknown>>(async () => {});
-const iframe = document.createElement("iframe");
+let previewDoc: Document | null = null;
+const iframe = {
+  get contentDocument() {
+    return previewDoc;
+  },
+};
 
 vi.mock("../../contexts/StudioContext", () => ({
   useStudioShellContextOptional: () => ({
@@ -22,17 +28,18 @@ vi.mock("../../contexts/TimelineEditContext", () => ({
 
 const harness = createHappyDomRootHarness();
 
-function render(element: TimelineElement) {
+function render(element: TimelineElement, part: "gain" | "duck" = "gain") {
   const host = document.createElement("div");
   document.body.appendChild(host);
   act(() =>
-    harness.mount(host).render(<ClipMenuAudioItems element={element} onClose={() => {}} />),
+    harness
+      .mount(host)
+      .render(<ClipMenuAudioItems part={part} element={element} onClose={() => {}} />),
   );
   return host;
 }
 
 const base = { start: 0, duration: 4, track: 0 };
-const plan = { targetLufs: -16, projectedLufs: -16, volume: 2, changeDb: 6, limitedBy: null };
 const clickItem = async (host: HTMLElement, label: string) => {
   const button = [...host.querySelectorAll("button")].find((b) => b.textContent?.includes(label));
   await act(async () => button?.click());
@@ -50,12 +57,46 @@ describe("ClipMenuAudioItems", () => {
     expect(host.textContent).toBe("");
   });
 
-  it("normalizes a video with sound by writing data-volume as one edit", async () => {
-    const plan = { targetLufs: -16, projectedLufs: -16, volume: 2, changeDb: 6, limitedBy: null };
-    vi.stubGlobal(
-      "fetch",
-      vi.fn(async () => Response.json({ plan })),
-    );
+  describe("Duck under voice", () => {
+    const duckLabel = (host: HTMLElement) =>
+      [...host.querySelectorAll("button")].find((b) => b.textContent?.includes("Duck under voice"));
+    const compose = (body: string) => {
+      previewDoc = document.implementation.createHTMLDocument("c");
+      previewDoc.body.innerHTML = body;
+    };
+    const music: TimelineElement = { ...base, id: "music", tag: "audio", src: "music.mp3" };
+
+    it("is hidden on a lone video with sound", () => {
+      compose(
+        `<video id="a-roll" src="a.mp4" data-start="0" data-duration="4" data-has-audio="true"></video>`,
+      );
+      const host = render(
+        { ...base, id: "a-roll", tag: "video", hasAudio: true, src: "a.mp4" },
+        "duck",
+      );
+      expect(duckLabel(host)).toBeUndefined();
+    });
+
+    it("shows for a music bed with an overlapping voice", () => {
+      compose(`<audio id="music" src="music.mp3" data-start="0" data-duration="4"></audio>
+        <audio id="voiceover" src="vo.wav" data-start="1" data-duration="2"></audio>`);
+      const host = render(music, "duck");
+      expect(duckLabel(host)?.getAttribute("aria-checked")).toBe("false");
+    });
+
+    it("stays available, checked, once ducked even with the voice gone", () => {
+      compose(
+        `<audio id="music" src="music.mp3" data-start="0" data-duration="4" data-fx-carve='{"enabled":true,"sources":["voiceover"],"strength":0.25}'></audio>`,
+      );
+      const host = render(music, "duck");
+      const item = duckLabel(host);
+      expect(item?.getAttribute("aria-checked")).toBe("true");
+      expect(item?.textContent).toBe("Duck under voice✓");
+    });
+  });
+
+  it("Audio Gain… opens the G dialog for the clicked clip", async () => {
+    useAudioGainDialogStore.getState().close();
     const element: TimelineElement = {
       ...base,
       id: "a-roll",
@@ -65,61 +106,29 @@ describe("ClipMenuAudioItems", () => {
     };
     const host = render(element);
     const button = [...host.querySelectorAll("button")].find((b) =>
-      b.textContent?.includes("Normalize loudness"),
+      b.textContent?.includes("Audio Gain…"),
     );
+    expect(button?.textContent).toBe("Audio Gain…G");
     await act(async () => button?.click());
-    await vi.waitFor(() => expect(setQuiet).toHaveBeenCalled());
-    expect(setQuiet).toHaveBeenCalledWith(element, "data-volume", "2", "Normalize loudness");
-    expect(showToast).toHaveBeenCalledWith("Normalized to −16 LUFS (+6.0 dB)", "info");
-    vi.unstubAllGlobals();
-  });
-
-  it("refuses to normalize a clip whose volume lane owns its gain", async () => {
-    const fetchSpy = vi.fn(async () => Response.json({ plan }));
-    vi.stubGlobal("fetch", fetchSpy);
-    const automation = JSON.stringify({
-      version: 1,
-      lanes: [{ target: "volume", points: [{ t: 0, v: 0.25 }] }],
-    });
-    const host = render({ ...base, id: "vo", tag: "audio", src: "vo.mp3", automation });
-    await clickItem(host, "Normalize loudness");
-    await vi.waitFor(() => expect(showToast).toHaveBeenCalled());
-    expect(showToast).toHaveBeenCalledWith(expect.stringContaining("volume is automated"), "error");
-    expect(setQuiet).not.toHaveBeenCalled();
-    expect(fetchSpy).not.toHaveBeenCalled();
-    vi.unstubAllGlobals();
-  });
-
-  it("reports a failed save instead of claiming the clip was normalized", async () => {
-    vi.stubGlobal(
-      "fetch",
-      vi.fn(async () => Response.json({ plan })),
-    );
-    setQuiet.mockResolvedValue({ status: "failed", reason: "disk full" });
-    const host = render({ ...base, id: "vo", tag: "audio", src: "vo.mp3" });
-    await clickItem(host, "Normalize loudness");
-    await vi.waitFor(() => expect(showToast).toHaveBeenCalledWith("disk full", "error"));
-    expect(showToast).not.toHaveBeenCalledWith(expect.stringContaining("Normalized"), "info");
-    vi.unstubAllGlobals();
+    expect(useAudioGainDialogStore.getState().targetKeys).toEqual(["a-roll"]);
+    expect(host.textContent).not.toContain("Normalize loudness");
   });
 
   it("stops ducking at the first refused save and says why", async () => {
-    document.body.appendChild(iframe);
-    const doc = iframe.contentDocument;
-    if (!doc) throw new Error("fixture");
-    doc.body.innerHTML = `<audio id="music" src="music.mp3" data-start="0" data-duration="10"></audio>
+    previewDoc = document.implementation.createHTMLDocument("c");
+    previewDoc.body.innerHTML = `<audio id="music" src="music.mp3" data-start="0" data-duration="10"></audio>
       <audio id="voiceover" src="vo.wav" data-start="1" data-duration="3"></audio>`;
     setQuiet.mockResolvedValue({
       status: "refused",
       reason: "Cannot edit timeline while recording",
     });
-    const host = render({ ...base, id: "music", tag: "audio", src: "music.mp3" });
+    const host = render({ ...base, id: "music", tag: "audio", src: "music.mp3" }, "duck");
     await clickItem(host, "Duck under voice");
     await vi.waitFor(() =>
       expect(showToast).toHaveBeenCalledWith("Cannot edit timeline while recording", "error"),
     );
     expect(setQuiet).toHaveBeenCalledTimes(1);
     expect(showToast).not.toHaveBeenCalledWith(expect.stringContaining("Ducks under"), "info");
-    iframe.remove();
+    previewDoc = null;
   });
 });