remotion-dev/remotion · error · TypeError

You have passed a volume of type ${typeof props.volume} to y

Error message

You have passed a volume of type ${typeof props.volume} to your <${component} /> component. Volume must be a number or a function with the signature '(frame: number) => number' undefined.

What it means

validateMediaProps throws a TypeError when the `volume` prop passed to <Audio>/<Video>/<Html5Audio>/<Html5Video> is not a number, not a function, and not undefined. Volume must be a number in [0,1] or a function (frame:number)=>number; anything else (string, object, null, boolean) is rejected.

Source

Thrown at packages/core/src/validate-media-props.ts:16

import type {VolumeProp} from './volume-prop.js';

export const validateMediaProps = (
	props: {
		volume: VolumeProp | undefined;
		playbackRate: number | undefined;
		preservePitch?: boolean | undefined;
	},
	component: 'Html5Video' | 'Html5Audio' | 'Audio' | 'Video',
) => {
	if (
		typeof props.volume !== 'number' &&
		typeof props.volume !== 'function' &&
		typeof props.volume !== 'undefined'
	) {
		throw new TypeError(
			`You have passed a volume of type ${typeof props.volume} to your <${component} /> component. Volume must be a number or a function with the signature '(frame: number) => number' undefined.`,
		);
	}

	if (typeof props.volume === 'number' && props.volume < 0) {
		throw new TypeError(
			`You have passed a volume below 0 to your <${component} /> component. Volume must be between 0 and 1`,
		);
	}

	if (
		typeof props.playbackRate !== 'number' &&
		typeof props.playbackRate !== 'undefined'
	) {
		throw new TypeError(
			`You have passed a playbackRate of type ${typeof props.playbackRate} to your <${component} /> component. Playback rate must a real number or undefined.`,
		);
	}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Coerce to number: `volume={Number(rawVolume)}`.
2. If volume is dynamic, pass a function: `volume={(f) => interpolate(f, [0, 30], [0, 1])}`.
3. Validate at the boundary: `typeof v === 'number' ? v : undefined`.
4. Omit the prop entirely (defaults apply) rather than passing a non-number.

Example fix

// before
<Audio src={url} volume={config.volume} /> // config.volume is "0.8"

// after
<Audio src={url} volume={Number(config.volume)} />

const v = typeof rawVolume === 'string' ? Number(rawVolume) : rawVolume;
if (v != null && typeof v !== 'number' && typeof v !== 'function') {
  throw new TypeError('invalid volume');
}

const isValidVolume = (v: unknown): v is number | ((f: number) => number) | undefined =>
  v === undefined || typeof v === 'number' || typeof v === 'function';

When it happens

Trigger: Passing volume="1" (string from an input/URL), volume={null}, volume={true}, volume={{...}}, or an object from unvalidated props. Common when volume comes from user input, JSON config, or CMS data.

Common situations: Reading volume from a form field (string); deserializing config where volume was stored as string; passing a string '0.5'; loose-typed prop chains; copy-paste from CSS values.

Related errors

• You have passed a volume below 0 to your <${component} /> co
• You have passed a playbackRate of type ${typeof props.playba
• You have passed a playbackRate of ${props.playbackRate} to y
• Argument passed for "frame" is not a number: ${frame}
• 'preservePitch' must be a boolean or undefined but got '${ty

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