remotion-dev/remotion · error · Error

<Html5Audio> is not supported in @remotion/web-renderer. Use

Error message

<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations

What it means

Thrown by <Html5Audio> when the runtime is client-side rendering (@remotion/web-renderer). Html5Audio relies on tags and behaviors that are not available in the web renderer; Remotion requires using <Audio> from @remotion/media for CSR scenarios.

Source

Thrown at packages/core/src/audio/html5-audio.tsx:55

		startFrom,
		endAt,
		trimBefore,
		trimAfter,
		name,
		_remotionInternalStack,
		pauseWhenBuffering,
		showInTimeline,
		onError: onRemotionError,
		freeze,
		...otherProps
	} = propsWithFreeze;
	const {loop, freeze: _freeze, ...propsOtherThanLoop} = propsWithFreeze;
	const {fps} = useVideoConfig();
	const environment = useRemotionEnvironment();
	const shouldPauseWhenBuffering = resolveV5Default(pauseWhenBuffering);

	if (environment.isClientSideRendering) {
		throw new Error(
			'<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations',
		);
	}

	if (typeof freeze !== 'undefined') {
		throw new TypeError(
			'The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.',
		);
	}

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. In @remotion/web-renderer, use <Audio> from @remotion/media instead of <Html5Audio>.
2. If you don't need CSR, ensure the environment is not flagged as client-side rendering.
3. See the linked docs page for CSR limitations and supported components.

Example fix

// before (in @remotion/web-renderer)
import {Audio} from 'remotion';
<Audio src={src} />

// after
import {Audio} from '@remotion/media';
<Audio src={src} />

import {useRemotionEnvironment} from 'remotion';
if (useRemotionEnvironment().isClientSideRendering) {
  // use @remotion/media <Audio> instead of <Html5Audio>
}

When it happens

Trigger: Rendering a composition containing <Html5Audio> (or <Audio> that resolves to Html5Audio) in a client-side-rendering environment such as @remotion/web-renderer.

Common situations: Switching from server-side rendering to the web renderer without swapping audio components; importing core <Audio> instead of media <Audio> for CSR.

Related errors

• <OffthreadVideo> is not supported in @remotion/web-renderer.
• getAudioData() is only available in the browser.
• getAudioDuration() is only available in the browser.
• Failed to create WebGL shader
• Failed to create WebGL program

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