remotion-dev/remotion · error · TypeError

The `<Audio>` tag requires a string for `src`, but got ${JSO

Error message

The `<Audio>` tag requires a string for `src`, but got ${JSON.stringify(props.src)} instead.

What it means

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.

Source

Thrown at packages/media/src/audio/audio.tsx:148

		effectivePremountFor,
		freezeFrame,
		isPremountingOrPostmounting,
		postmountingActive,
		premountingActive,
		premountingStyle,
	} = Internals.usePremounting({
		from: from ?? 0,
		durationInFrames: basicInfo.duration,
		premountFor: premountFor ?? null,
		postmountFor: postmountFor ?? null,
		style: style ?? null,
		styleWhilePremounted: null,
		styleWhilePostmounted: null,
		hideWhilePremounted: 'display-none',
	});

	if (typeof props.src !== 'string') {
		throw new TypeError(
			`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(
				props.src,
			)} instead.`,
		);
	}

	validateMediaProps(
		{playbackRate: props.playbackRate, volume: props.volume},
		'Audio',
	);

	if (sequenceDurationInFrames === 0) {
		return null;
	}

	return (
		<Freeze frame={freezeFrame} active={isPremountingOrPostmounting}>
			<Sequence

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Ensure src is a primitive string: <Audio src={String(url)} /> or <Audio src={url.toString()} />.
2. If using a URL object, convert with .href or .toString().
3. Type the src prop strictly as string in your composition's props interface.

Example fix

// before
<Audio src={new URL('https://example.com/a.mp3')} />

// after
<Audio src={'https://example.com/a.mp3'} />

const audioSrc = typeof props.src === 'string' ? props.src : String(props.src ?? '');
<Audio src={audioSrc} />;

const isStringSrc = (v: unknown): v is string => typeof v === 'string';

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• No `src` was passed to <NewAudioForPreview>.
• No `src` was passed to <Audio>.
• The `<Video>` tag requires a string for `src`, but got ${JSO
• No 'src' was passed to <Html5Audio>.
• No src passed

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/1d2b0df5c727ae05. Report an issue: GitHub.