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:T34b5,"use client"; import { ArrowCounterClockwiseIcon, DesktopIcon, GearSixIcon, MicrophoneIcon, MusicNotesIcon, PauseIcon, PlayIcon, SkipForwardIcon, SquaresFourIcon, WaveformIcon, } from "@phosphor-icons/react"; import { useEffect, useEffectEvent, useState } from "react"; import { MixerMasterStrip } from "@/components/blocks/system-audio-mixer/mixer-master-strip"; import { MixerSourceStrip } from "@/components/blocks/system-audio-mixer/mixer-source-strip"; import { AudioDeviceSelect } from "@/components/ui/audio-device-select"; import { Button } from "@/components/ui/button"; import { ChannelStripNotice } from "@/components/ui/channel-strip"; import type { ChannelStripStatusProps } from "@/components/ui/channel-strip"; import { Mixer, MixerActions, MixerChannels, MixerEmpty, MixerHeader, MixerMaster, MixerSeparator, MixerTitle, } from "@/components/ui/mixer"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { SoundPad, SoundPadGrid, SoundPadLabel, SoundPadProgress, SoundPadShortcut, } from "@/components/ui/sound-pad"; import { Switch } from "@/components/ui/switch"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { useAudioDevices } from "@/hooks/use-audio-devices"; import { useAudioPlayer } from "@/hooks/use-audio-player"; import type { AudioPlayerController } from "@/hooks/use-audio-player"; import { useGainNode } from "@/hooks/use-gain-node"; import { useMicrophone } from "@/hooks/use-microphone"; import type { UseMicrophoneResult } from "@/hooks/use-microphone"; import { useMixer } from "@/hooks/use-mixer"; import type { Mixer as MixerController } from "@/hooks/use-mixer"; import { useSound } from "@/hooks/use-sound"; import { useSystemAudio } from "@/hooks/use-system-audio"; import type { UseSystemAudioResult } from "@/hooks/use-system-audio"; import { useWebAudioMixer } from "@/hooks/use-web-audio-mixer"; import type { FrameSource, MeterFrame, Orientation } from "@/lib/audio/types"; import { cn } from "@/lib/utils"; export type MixerSourceId = "microphone" | "system" | "music" | "sounds"; export interface MixerTrack { id: string; title: string; artist?: string; src: string; } export interface MixerSound { id: string; label: string; src: string | AudioBuffer; hotkey?: string; accent?: string; } export interface SystemAudioMixerProps { /** Rows or console strips. Default `horizontal`. */ defaultOrientation?: Orientation; /** Which sources to show. Default all four. */ sources?: MixerSourceId[]; /** Save mixer settings to localStorage under this key. */ persistKey?: string; /** The mixed output, for recording or streaming. */ onOutputChange?: (stream: MediaStream | null) => void; /** Tracks for the music channel. */ tracks?: MixerTrack[]; /** Sounds for the sounds channel. */ sounds?: MixerSound[]; className?: string; } const ALL_SOURCES: MixerSourceId[] = [ "microphone", "system", "music", "sounds", ]; const NO_TRACKS: MixerTrack[] = []; const NO_SOUNDS: MixerSound[] = []; const CHANNELS = [ { id: "microphone" }, { gainDb: -6, id: "system" }, { gainDb: -12, id: "music", monitor: true }, { gainDb: -6, id: "sounds", monitor: true }, ]; interface Status { label: string; tone: ChannelStripStatusProps["tone"]; } const MixerPad = ({ sound, bus, }: { sound: MixerSound; bus: AudioNode | null; }) => { const player = useSound(sound.src, { destination: bus }); return ( player.play()} playing={player.isPlaying} size="sm" > {sound.label} ); }; interface ChannelProps { mixer: MixerController; meter: FrameSource; } const microphoneStatus = ( microphone: UseMicrophoneResult, audible: boolean ): Status => { if (microphone.status === "active") { return audible ? { label: "Live", tone: "live" } : { label: "Muted", tone: "muted" }; } if (microphone.status === "denied") { return { label: "Blocked", tone: "error" }; } return { label: "Off", tone: "default" }; }; const systemStatus = (system: UseSystemAudioResult): Status => { if (system.status === "active") { return { label: "On", tone: "live" }; } if (system.status === "unsupported") { return { label: "Unsupported", tone: "warning" }; } return { label: "Off", tone: "default" }; }; const MicrophoneChannel = ({ microphone, deviceId, onDeviceChange, mixer, meter, }: ChannelProps & { microphone: UseMicrophoneResult; deviceId: string | null; onDeviceChange: (deviceId: string | null) => void; }) => { const devices = useAudioDevices(); const active = microphone.status === "active"; const deviceLabel = devices.devices.find((device) => device.id === deviceId)?.label ?? "Default microphone"; return ( } > devices.requestPermission()} onValueChange={onDeviceChange} permission={ devices.permission === "unsupported" ? "denied" : devices.permission } value={deviceId} /> } description={active ? deviceLabel : "Not listening"} icon={} id="microphone" meter={meter} mixer={mixer} notice={ microphone.status === "denied" ? ( Microphone access is blocked. Allow it in your browser's site settings. ) : null } status={microphoneStatus(microphone, mixer.isAudible("microphone"))} title="Microphone" /> ); }; const SystemChannel = ({ system, mixer, meter, }: ChannelProps & { system: UseSystemAudioResult }) => { const active = system.status === "active"; return ( checked ? system.start() : system.stop() } size="sm" /> } description={active ? "Capturing" : "Share a screen or tab with audio"} icon={} id="system" meter={meter} mixer={mixer} monitorable={false} notice={ system.status === "no-audio" ? ( Nothing to hear: tick "Share audio" in the browser's picker. ) : null } status={systemStatus(system)} title="System audio" /> ); }; const MusicChannel = ({ player, track, trackCount, onNext, mixer, meter, }: ChannelProps & { player: AudioPlayerController; track: MixerTrack | undefined; trackCount: number; onNext: () => void; }) => ( } description={track ? track.title : "No tracks"} icon={} id="music" meter={meter} mixer={mixer} status={player.playing ? { label: "Playing", tone: "live" } : undefined} title="Music" /> ); const SoundsChannel = ({ sounds, bus, mixer, meter, }: ChannelProps & { sounds: MixerSound[]; bus: AudioNode | null }) => ( } > {sounds.map((sound) => ( ))} } description={`${sounds.length} pads`} icon={} id="sounds" meter={meter} mixer={mixer} title="Sounds" /> ); export const SystemAudioMixer = ({ defaultOrientation = "horizontal", sources = ALL_SOURCES, persistKey, onOutputChange, tracks = NO_TRACKS, sounds = NO_SOUNDS, className, }: SystemAudioMixerProps) => { const [orientation, setOrientation] = useState(defaultOrientation); const mixer = useMixer({ channels: CHANNELS, persistKey }); const [deviceId, setDeviceId] = useState(null); const microphone = useMicrophone({ deviceId }); const system = useSystemAudio(); const [trackIndex, setTrackIndex] = useState(0); const track = tracks[trackIndex]; const nextTrack = () => setTrackIndex((index) => tracks.length > 0 ? (index + 1) % tracks.length : 0 ); const player = useAudioPlayer({ onEnded: nextTrack, src: track?.src }); // Sound pads play into one bus so the mixer sees them as a single source. const soundBus = useGainNode({ destination: null }); const graph = useWebAudioMixer(mixer, { ducking: { targets: ["music"], trigger: "microphone" }, inputs: { microphone: microphone.stream, music: player.element, sounds: soundBus, system: system.stream, }, }); // Fires when the stream changes, not on every render of the parent. const emitOutput = useEffectEvent((stream: MediaStream | null) => { onOutputChange?.(stream); }); useEffect(() => { emitOutput(graph.output); }, [graph.output]); const show = (id: MixerSourceId) => sources.includes(id); const meterFor = (id: MixerSourceId) => graph.meters[id] ?? graph.master.meter; return ( Audio mixer setOrientation(value as Orientation)} value={orientation} > Rows Console {show("microphone") ? ( ) : null} {show("system") ? ( ) : null} {show("music") ? ( ) : null} {show("sounds") ? ( ) : null} No audio sources. ); }; 53:Tfca,"use client"; import { HeadphonesIcon } from "@phosphor-icons/react"; import type { ReactNode } from "react"; import { ChannelStrip, ChannelStripActions, ChannelStripControls, ChannelStripDescription, ChannelStripFader, ChannelStripHeader, ChannelStripIcon, ChannelStripMeter, ChannelStripStatus, ChannelStripText, ChannelStripTitle, ChannelStripValue, } from "@/components/ui/channel-strip"; import type { ChannelStripStatusProps } from "@/components/ui/channel-strip"; import { MonitorToggle, MuteToggle, SoloToggle, } from "@/components/ui/channel-toggle"; import { Fader, FaderRange, FaderThumb, FaderTrack, } from "@/components/ui/fader"; import { LevelMeter } from "@/components/ui/level-meter"; import type { Mixer } from "@/hooks/use-mixer"; import { formatDb } from "@/lib/audio/decibels"; import type { FrameSource, MeterFrame } from "@/lib/audio/types"; export interface MixerSourceStripProps { id: string; title: string; description?: ReactNode; icon: ReactNode; accent?: string; mixer: Mixer; meter: FrameSource; status?: { label: string; tone: ChannelStripStatusProps["tone"] }; /** Buttons in the header. */ actions?: ReactNode; /** A ChannelStripNotice, shown under the strip. */ notice?: ReactNode; /** Show the monitor toggle. Default true. */ monitorable?: boolean; disabled?: boolean; } export const MixerSourceStrip = ({ id, title, description, icon, accent, mixer, meter, status, actions, notice, monitorable = true, disabled = false, }: MixerSourceStripProps) => { const channel = mixer.channel(id); if (!channel) { return null; } return ( {icon} {title} {description ? ( {description} ) : null} {status ? ( {status.label} ) : null} {actions ? {actions} : null} mixer.setGain(id, gainDb)} silenceAtMin size="sm" taper="audio" value={channel.gainDb} > {formatDb(channel.gainDb, { floorDb: -60 })} mixer.setMuted(id, muted)} pressed={channel.muted} size="sm" > M mixer.setSolo(id, solo)} pressed={channel.solo} size="sm" > S {monitorable ? ( mixer.setMonitor(id, monitor)} pressed={channel.monitor} size="sm" > ) : null} {notice} ); }; 54:Ta95,"use client"; import { SpeakerHighIcon } from "@phosphor-icons/react"; import { ChannelStrip, ChannelStripControls, ChannelStripDescription, ChannelStripFader, ChannelStripHeader, ChannelStripIcon, ChannelStripMeter, ChannelStripText, ChannelStripTitle, ChannelStripValue, } from "@/components/ui/channel-strip"; import { MuteToggle } from "@/components/ui/channel-toggle"; import { Fader, FaderRange, FaderThumb, FaderTrack, } from "@/components/ui/fader"; import { LevelMeter, LevelMeterBar, LevelMeterChannel, LevelMeterChannels, LevelMeterClip, LevelMeterHold, LevelMeterTrack, } from "@/components/ui/level-meter"; import type { Mixer } from "@/hooks/use-mixer"; import { formatDb } from "@/lib/audio/decibels"; import type { FrameSource, MeterFrame } from "@/lib/audio/types"; const CHANNELS = [0, 1]; export interface MixerMasterStripProps { mixer: Mixer; meter: FrameSource; } export const MixerMasterStrip = ({ mixer, meter }: MixerMasterStripProps) => ( Master Mix output {CHANNELS.map((index) => ( ))} mixer.setMasterGain(value)} silenceAtMin size="sm" taper="audio" value={mixer.master.gainDb} > {formatDb(mixer.master.gainDb, { floorDb: -60 })} mixer.setMasterMuted(value)} pressed={mixer.master.muted} size="sm" > M ); 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":["button","switch","tabs","popover","@audiocn/mixer","@audiocn/channel-strip","@audiocn/level-meter","@audiocn/fader","@audiocn/channel-toggle","@audiocn/audio-device-select","@audiocn/sound-pad","@audiocn/use-mixer","@audiocn/use-web-audio-mixer","@audiocn/use-microphone","@audiocn/use-system-audio","@audiocn/use-audio-devices","@audiocn/use-audio-player","@audiocn/use-sound","@audiocn/use-audio-context","@audiocn/use-gain-node"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/blocks/system-audio-mixer/system-audio-mixer.tsx","content":"$52","type":"registry:block"},{"path":"components/blocks/system-audio-mixer/mixer-source-strip.tsx","content":"$53","type":"registry:block"},{"path":"components/blocks/system-audio-mixer/mixer-master-strip.tsx","content":"$54","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]