4e: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"] 4f: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"] 50:T269e,"use client"; import { CheckCircleIcon, MicrophoneIcon, WarningCircleIcon, } from "@phosphor-icons/react"; import { useEffect, useId, useRef, useState } from "react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { AudioDeviceSelect, AudioDeviceSelectContent, AudioDeviceSelectPreview, AudioDeviceSelectTrigger, AudioDeviceSelectValue, } from "@/components/ui/audio-device-select"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { DbReadout } from "@/components/ui/db-readout"; import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"; import { LevelMeter, LevelMeterBar, LevelMeterChannel, LevelMeterChannels, LevelMeterClip, LevelMeterHold, LevelMeterScale, LevelMeterTrack, } from "@/components/ui/level-meter"; import { LiveWaveform } from "@/components/ui/live-waveform"; 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 { useAudioDevices } from "@/hooks/use-audio-devices"; import { useGainNode } from "@/hooks/use-gain-node"; import { useMicrophone } from "@/hooks/use-microphone"; import { dbToGain } from "@/lib/audio/decibels"; import type { FrameSource, MeterFrame } from "@/lib/audio/types"; const CHECK_DURATION_MS = 3000; type CheckResult = "good" | "quiet" | "loud" | "silent"; const RESULTS: Record< CheckResult, { title: string; description: string; ok: boolean } > = { good: { description: "Your level sits in the right range.", ok: true, title: "Sounds good", }, loud: { description: "Your voice clipped. Lower the gain.", ok: false, title: "Too loud", }, quiet: { description: "Raise the gain or move closer.", ok: false, title: "Too quiet", }, silent: { description: "Check the device and that it is not muted.", ok: false, title: "No signal", }, }; const judge = (peakDb: number): CheckResult => { if (peakDb < -55) { return "silent"; } if (peakDb >= -1) { return "loud"; } if (peakDb < -30) { return "quiet"; } return "good"; }; /** Runs the microphone through a gain stage and analyses the result. */ const useMicInput = ( stream: MediaStream | null, gainDb: number, muted: boolean ) => { // Not routed to the speakers: the analyser taps it, and nothing else. const gainNode = useGainNode({ destination: null, gain: muted ? 0 : dbToGain(gainDb), input: stream, }); return useAudioAnalyser(stream ? gainNode : null, { historySize: 120 }); }; /** Listens for a few seconds, then judges the loudest peak. */ const useLevelCheck = (meter: FrameSource) => { const [checking, setChecking] = useState(false); const [result, setResult] = useState(null); const peakRef = useRef(Number.NEGATIVE_INFINITY); useEffect(() => { if (!checking) { return; } peakRef.current = Number.NEGATIVE_INFINITY; const unsubscribe = meter.subscribe((frame) => { for (const level of frame.channels) { peakRef.current = Math.max(peakRef.current, level.peakDb); } }); const timer = setTimeout(() => { setChecking(false); setResult(judge(peakRef.current)); }, CHECK_DURATION_MS); return () => { unsubscribe(); clearTimeout(timer); }; }, [checking, meter]); const start = () => { setResult(null); setChecking(true); }; return { checking, result, start }; }; export interface MicSetupProps { deviceId?: string | null; onDeviceChange?: (deviceId: string | null) => void; gainDb?: number; onGainChange?: (gainDb: number) => void; muted?: boolean; onMutedChange?: (muted: boolean) => void; /** Open the microphone on mount instead of waiting for a click. Default false. */ autoStart?: boolean; className?: string; } export const MicSetup = ({ deviceId: deviceIdProp, onDeviceChange, gainDb: gainDbProp, onGainChange, muted: mutedProp, onMutedChange, autoStart = false, className, }: MicSetupProps) => { const muteId = useId(); const [started, setStarted] = useState(autoStart); const [deviceIdState, setDeviceIdState] = useState(null); const [gainState, setGainState] = useState(0); const [mutedState, setMutedState] = useState(false); const deviceId = deviceIdProp === undefined ? deviceIdState : deviceIdProp; const gainDb = gainDbProp ?? gainState; const muted = mutedProp ?? mutedState; const devices = useAudioDevices(); const microphone = useMicrophone({ deviceId, enabled: started }); const analyser = useMicInput(microphone.stream, gainDb, muted); const { checking, result, start: startCheck } = useLevelCheck(analyser.meter); const setDeviceId = (next: string | null) => { setDeviceIdState(next); onDeviceChange?.(next); }; const setGain = (next: number) => { setGainState(next); onGainChange?.(next); }; const setMuted = (next: boolean) => { setMutedState(next); onMutedChange?.(next); }; const active = microphone.status === "active"; const verdict = result ? RESULTS[result] : null; return ( Microphone Pick a microphone and check your level. Device devices.requestPermission()} onValueChange={setDeviceId} permission={ devices.permission === "unsupported" ? "denied" : devices.permission } value={deviceId} > {active ? null : ( )}

Level

Gain Mute microphone

{verdict ? ( {verdict.ok ? : } {verdict.title} {verdict.description} ) : null} {microphone.status === "denied" ? ( Microphone blocked Allow microphone access in your browser's site settings. ) : null}

); }; 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@audiocn","registryDependencies":["alert","button","card","field","switch","@audiocn/audio-device-select","@audiocn/db-readout","@audiocn/level-meter","@audiocn/live-waveform","@audiocn/parameter-slider","@audiocn/use-audio-analyser","@audiocn/use-audio-context","@audiocn/use-audio-devices","@audiocn/use-microphone","@audiocn/use-gain-node"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/blocks/mic-setup/mic-setup.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]