{"record":{"id":"1d2b0df5c727ae05","repo":"remotion-dev/remotion","slug":"the-audio-tag-requires-a-string-for-src-but","errorCode":null,"errorMessage":"The `<Audio>` tag requires a string for `src`, but got ${JSON.stringify(props.src)} instead.","messagePattern":"The `<Audio>` tag requires a string for `src`, but got (.+?) instead\\.","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/media/src/audio/audio.tsx","lineNumber":148,"sourceCode":"\t\teffectivePremountFor,\n\t\tfreezeFrame,\n\t\tisPremountingOrPostmounting,\n\t\tpostmountingActive,\n\t\tpremountingActive,\n\t\tpremountingStyle,\n\t} = Internals.usePremounting({\n\t\tfrom: from ?? 0,\n\t\tdurationInFrames: basicInfo.duration,\n\t\tpremountFor: premountFor ?? null,\n\t\tpostmountFor: postmountFor ?? null,\n\t\tstyle: style ?? null,\n\t\tstyleWhilePremounted: null,\n\t\tstyleWhilePostmounted: null,\n\t\thideWhilePremounted: 'display-none',\n\t});\n\n\tif (typeof props.src !== 'string') {\n\t\tthrow new TypeError(\n\t\t\t`The \\`<Audio>\\` tag requires a string for \\`src\\`, but got ${JSON.stringify(\n\t\t\t\tprops.src,\n\t\t\t)} instead.`,\n\t\t);\n\t}\n\n\tvalidateMediaProps(\n\t\t{playbackRate: props.playbackRate, volume: props.volume},\n\t\t'Audio',\n\t);\n\n\tif (sequenceDurationInFrames === 0) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Freeze frame={freezeFrame} active={isPremountingOrPostmounting}>\n\t\t\t<Sequence","sourceCodeStart":130,"sourceCodeEnd":166,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/media/src/audio/audio.tsx#L130-L166","documentation":"Thrown by the public <Audio> wrapper in @remotion/media when `props.src` is present but not a string. Because Remotion must serialize src into an asset manifest for rendering and preload it in preview, it requires a primitive string; objects, numbers, arrays, or React elements are rejected up front before any media logic runs.","triggerScenarios":"Passing src as a number (e.g. an asset id), an object, an array, a URL instance, or any non-string value to <Audio>. Also triggered by spreading props where src loses its string type.","commonSituations":"Passing a URL object instead of URL.toString(), passing a numeric asset identifier, or spreading an any-typed config object whose src field is not a string.","solutions":["Ensure src is a primitive string: <Audio src={String(url)} /> or <Audio src={url.toString()} />.","If using a URL object, convert with .href or .toString().","Type the src prop strictly as string in your composition's props interface."],"exampleFix":"// before\n<Audio src={new URL('https://example.com/a.mp3')} />\n\n// after\n<Audio src={'https://example.com/a.mp3'} />","handlingStrategy":"type-guard","validationCode":"const audioSrc = typeof props.src === 'string' ? props.src : String(props.src ?? '');\n<Audio src={audioSrc} />;","typeGuard":"const isStringSrc = (v: unknown): v is string => typeof v === 'string';","tryCatchPattern":null,"preventionTips":["Type the src prop as string in your composition interface.","Convert URL objects to strings (.href/.toString()) at the point of construction.","Avoid spreading any-typed config objects into media components."],"tags":["audio","src","typeerror","media","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}