50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1dca,"use client"; import { DesktopIcon, InfoIcon, WarningIcon } from "@phosphor-icons/react"; import { useEffect, useEffectEvent, useId, useMemo, useState } from "react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, } from "@/components/ui/field"; import { LevelMeter } from "@/components/ui/level-meter"; import { ParameterSlider, ParameterSliderControl, ParameterSliderHeader, ParameterSliderInput, ParameterSliderLabel, ParameterSliderReset, } from "@/components/ui/parameter-slider"; import { Switch } from "@/components/ui/switch"; import { useAudioAnalyser } from "@/hooks/use-audio-analyser"; import { useAudioContext } from "@/hooks/use-audio-context"; import { useGainNode } from "@/hooks/use-gain-node"; import { useSystemAudio } from "@/hooks/use-system-audio"; import type { SystemAudioStatus } from "@/hooks/use-system-audio"; import { dbToGain } from "@/lib/audio/decibels"; const DEFAULT_GAIN_DB = -6; const STATE_LABELS: Record = { active: "On", denied: "Needs permission", ended: "Ended", idle: "Off", "no-audio": "No audio shared", prompting: "Choose what to share…", unsupported: "Unsupported", }; export interface SystemAudioSettingsProps { enabled?: boolean; onEnabledChange?: (enabled: boolean) => void; gainDb?: number; onGainChange?: (gainDb: number) => void; /** The captured stream after the level control, for your own routing. */ onStreamChange?: (stream: MediaStream | null) => void; className?: string; } export const SystemAudioSettings = ({ enabled: enabledProp, onEnabledChange, gainDb: gainDbProp, onGainChange, onStreamChange, className, }: SystemAudioSettingsProps) => { const enabledId = useId(); const system = useSystemAudio(); const { context } = useAudioContext(); const [gainState, setGainState] = useState(DEFAULT_GAIN_DB); const gainDb = gainDbProp ?? gainState; const output = useMemo( () => context?.createMediaStreamDestination() ?? null, [context] ); // The captured stream, through the level control, into a stream for the // parent. Not routed to the speakers. const gainNode = useGainNode({ destination: output, gain: dbToGain(gainDb), input: system.stream, }); const analyser = useAudioAnalyser(system.stream ? gainNode : null, { channels: "stereo", }); const active = system.status === "active"; // A new callback each parent render must not re-emit the same stream. const emitStream = useEffectEvent((stream: MediaStream | null) => { onStreamChange?.(stream); }); const processed = context && gainNode && output && system.stream ? output.stream : null; useEffect(() => { emitStream(processed); }, [processed]); const { start: startCapture, stop: stopCapture } = system; const isCapturing = useEffectEvent( () => system.status === "active" || system.status === "prompting" ); useEffect(() => { if (enabledProp === true) { if (!isCapturing()) { startCapture(); } } else if (enabledProp === false) { stopCapture(); } }, [enabledProp, startCapture, stopCapture]); const setEnabled = (next: boolean) => { onEnabledChange?.(next); // Controlled, the effect above acts once the parent passes the new value. // When the prop already says so (capture ended while `enabled` stayed // true), nothing will change, so act here. const propWillChange = enabledProp !== undefined && enabledProp !== next; if (propWillChange) { return; } if (next) { system.start(); } else { system.stop(); } }; const setGain = (next: number) => { setGainState(next); onGainChange?.(next); }; return ( System audio Add the sound from your computer to your recording or stream.

Capture system audio {STATE_LABELS[system.status]}

Your browser asks what to share. Choose a screen or tab and turn on its audio. Level {active ? ( ) : null} {system.isSupported ? ( What gets captured Everything the shared screen, window or tab plays. Some browsers only offer tab audio. ) : ( Not available in this browser This browser cannot capture system audio. Try a Chromium-based browser. )} {system.status === "denied" ? ( Capture was not started No screen or tab was shared. Turn capture on again and approve the browser's sharing request. If access is blocked, allow screen sharing in your browser or system settings. ) : null} {system.status === "no-audio" ? ( No audio was shared Turn capture on again and tick the option to share audio. ) : null} ); }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@phosphor-icons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40phosphor-icons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@phosphor-icons/react"}]]}]}]]}],["$","$L50",null,{"namespace":"@audiocn","registryDependencies":["alert","badge","card","field","switch","@audiocn/level-meter","@audiocn/parameter-slider","@audiocn/use-audio-analyser","@audiocn/use-audio-context","@audiocn/use-system-audio","@audiocn/use-gain-node"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/blocks/system-audio-settings/system-audio-settings.tsx","content":"$52","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]