remotion-dev/remotion · error · TypeError

No 'src' was passed to <Html5Audio>.

Error message

No 'src' was passed to <Html5Audio>.

What it means

Thrown by <Html5Audio> in preview when no src is supplied. Audio playback requires a source URL; an undefined/null/empty src is treated as a programming error rather than a silent skip.

Source

Thrown at packages/core/src/audio/AudioForPreview.tsx:102

	// Typecheck that we are not accidentially passing unrecognized props
	// to the DOM
	const _propsValid: IsExact<
		typeof nativeProps,
		Omit<NativeAudioProps, 'crossOrigin' | 'src' | 'name' | 'muted'>
	> = true;
	if (!_propsValid) {
		throw new Error('typecheck error');
	}

	const [mediaVolume] = useMediaVolumeState();
	const [playerMuted] = usePlayerMutedState();

	const volumePropFrame = useFrameForVolumeProp(
		loopVolumeCurveBehavior ?? 'repeat',
	);

	if (!src) {
		throw new TypeError("No 'src' was passed to <Html5Audio>.");
	}

	const preloadedSrc = usePreload(src);

	const sequenceContext = useContext(SequenceContext);

	const [timelineId] = useState(() => String(Math.random()));

	const userPreferredVolume = evaluateVolume({
		frame: volumePropFrame,
		volume,
		mediaVolume,
	});

	warnAboutTooHighVolume(userPreferredVolume);

	const crossOriginValue = getCrossOriginValue({
		crossOrigin,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Provide a valid string src: <Audio src="/audio/track.mp3" />.
  2. Conditionally render only when src is available: {src && <Audio src={src} />}.
  3. Verify the asset import resolves to a URL string.

Example fix

// before
<Audio src={maybeUrl} />

// after
{maybeUrl ? <Audio src={maybeUrl} /> : null}
Defensive patterns

Strategy: type-guard

Validate before calling

if (!src || typeof src !== 'string') {
  // do not render <Audio>
}

Type guard

const hasAudioSrc = (src: unknown): src is string =>
  typeof src === 'string' && src.length > 0;

Prevention

When it happens

Trigger: Passing src={undefined}, src={null}, src="", or omitting src on <Audio>. Common when src comes from an async import or prop that hasn't resolved.

Common situations: Conditional src that is sometimes falsy; dynamic imports not yet loaded; misconfigured static asset path; typo in the prop name.

Related errors


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