{"record":{"id":"3afd52f89f197946","repo":"remotion-dev/remotion","slug":"useaudiodata-requires-a-src-parameter","errorCode":null,"errorMessage":"useAudioData requires a 'src' parameter","messagePattern":"useAudioData requires a 'src' parameter","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/media-utils/src/use-audio-data.ts","lineNumber":25,"sourceCode":"\tsampleRate?: number;\n\t/**\n\t * Captured only from the first render and passed to `fetch()`.\n\t * Updates after mount are ignored so hooks do not depend on a new object\n\t * identity every render (e.g. inline `{credentials: 'include'}`).\n\t */\n\trequestInit?: RequestInit;\n};\n\n/*\n * @description Wraps the getAudioData() function into a hook and does three things: keeps the audio data in a state, wraps the function in a delayRender() / continueRender() pattern, and handles the case where the component gets unmounted while fetching is in progress to prevent React errors.\n * @see [Documentation](https://www.remotion.dev/docs/use-audio-data)\n */\nexport const useAudioData = (\n\tsrc: string,\n\toptions?: UseAudioDataOptions,\n): MediaUtilsAudioData | null => {\n\tif (!src) {\n\t\tthrow new TypeError(\"useAudioData requires a 'src' parameter\");\n\t}\n\n\tconst mountState = useRef({isMounted: true});\n\n\tuseEffect(() => {\n\t\tconst {current} = mountState;\n\t\tcurrent.isMounted = true;\n\t\treturn () => {\n\t\t\tcurrent.isMounted = false;\n\t\t};\n\t}, []);\n\n\tconst [metadata, setMetadata] = useState<MediaUtilsAudioData | null>(null);\n\tconst {delayRender, continueRender} = useDelayRender();\n\tconst sampleRate = options?.sampleRate;\n\tconst [initialRequestInit] = useState(options?.requestInit);\n\n\tconst fetchMetadata = useCallback(async () => {","sourceCodeStart":7,"sourceCodeEnd":43,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/media-utils/src/use-audio-data.ts#L7-L43","documentation":"Thrown by the useAudioData() hook when `src` is falsy (line 24-25). It is a TypeError thrown synchronously during render, before any audio work, so React unmounts the component and the error surfaces through the nearest error boundary. The guard exists because the hook cannot delayRender without a target URL.","triggerScenarios":"Calling useAudioData(undefined), useAudioData(null), useAudioData(''), or useAudioData(someProp) where the prop is not yet populated; passing a state variable before it has been set; passing 0 from a numeric id by mistake.","commonSituations":"Conditional audio where src comes from a fetch that has not resolved yet; defaulting a prop to undefined; passing a numeric index instead of a URL string; copy-paste from a schema where the field is optional.","solutions":["Ensure the src argument is a non-empty string before rendering the component that calls useAudioData.","Render the hook's component conditionally: only mount it once src is a valid non-empty string.","If audio is optional, render a placeholder until src resolves instead of calling the hook with an empty value.","Type the prop as string (not string | undefined) at the call site so TypeScript flags the missing value at compile time."],"exampleFix":"// before (src may be empty -> TypeError)\nconst audio = useAudioData(src);\n\n// after (mount hook only when src is ready)\nreturn src ? <AudioVis src={src} /> : <Placeholder />;\n// inside AudioVis:\nconst audio = useAudioData(src);","handlingStrategy":"validation","validationCode":"// Validate before rendering the component that uses the hook\nfunction isValidSrc(src: unknown): src is string {\n  return typeof src === 'string' && src.trim().length > 0;\n}\n\n// at the call site:\nreturn isValidSrc(src) ? <AudioConsumer src={src} /> : <Placeholder />;","typeGuard":"function isValidAudioSrc(src: unknown): src is string {\n  return typeof src === 'string' && src.length > 0;\n}","tryCatchPattern":"try {\n  const audio = useAudioData(src);\n} catch (err) {\n  // note: this throws during render, so an ErrorBoundary is required to catch it\n  throw err;\n}","preventionTips":["Type the src prop as string (not optional) at the call site so TS catches missing values.","Conditionally mount the hook's component only after src is a non-empty string.","Add an ErrorBoundary around any subtree that uses useAudioData so a bad src degrades gracefully.","Treat empty src as 'not ready' and render a placeholder instead of calling the hook."],"tags":["react-hook","validation","typescript","audio"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}