Merge pull request #6170 from remotion-dev/feature/web-renderer-audio-codecs

Author: JonnyBurger

packages/docs/docs/web-renderer/render-media-on-web.mdx

@@ -147,6 +147,34 @@ _boolean_
 
 If set to `true`, no audio will be included in the output video.
 
+### `audioCodec?`
+
+_string_ <TsType type="WebRendererAudioCodec" source="@remotion/web-renderer" />
+
+Which codec should be used to encode the audio.  
+Default depends on the container:
+
+- For `mp4` container: `aac`
+- For `webm` container: `opus`
+
+:::note
+AAC encoding is not supported in Firefox. If you don't specify an audio codec and the default cannot be encoded by the browser, Remotion will automatically fall back to a supported codec.
+
+If you explicitly specify `aac` and render in Firefox, the render will fail with an error.
+:::
+
+### `audioBitrate?`
+
+_number | string_ <TsType type="WebRendererQuality" source="@remotion/web-renderer" />
+
+Controls the quality and file size of the audio. Can be either a number representing the bitrate in bits per second, or one of the preset quality levels:
+
+- `"very-low"`: Smallest file size, lowest quality
+- `"low"`: Small file size, lower quality
+- `"medium"`: Balanced file size and quality (default)
+- `"high"`: Larger file size, higher quality
+- `"very-high"`: Largest file size, highest quality
+
 ### `delayRenderTimeoutInMilliseconds?`
 
 _number_

packages/studio/src/components/Menu/MenuSubItem.tsx

@@ -69,6 +69,7 @@ export const MenuSubItem: React.FC<{
 	readonly setSubMenuActivated: React.Dispatch<
 		React.SetStateAction<SubMenuActivated>
 	>;
+	readonly disabled?: boolean;
 }> = ({
 	label,
 	leaveLeftSpace,
@@ -82,6 +83,7 @@ export const MenuSubItem: React.FC<{
 	onQuitMenu,
 	subMenuActivated,
 	setSubMenuActivated,
+	disabled,
 }) => {
 	const [hovered, setHovered] = useState(false);
 	const ref = useRef<HTMLDivElement>(null);
@@ -95,12 +97,18 @@ export const MenuSubItem: React.FC<{
 	const style = useMemo((): React.CSSProperties => {
 		return {
 			...container,
-			backgroundColor: selected ? CLEAR_HOVER : 'transparent',
+			backgroundColor: selected && !disabled ? CLEAR_HOVER : 'transparent',
+			opacity: disabled ? 0.5 : 1,
+			cursor: disabled ? 'not-allowed' : 'default',
 		};
-	}, [selected]);
+	}, [selected, disabled]);
 
 	const onPointerUp = useCallback(
 		(e: PointerEvent<HTMLDivElement>) => {
+			if (disabled) {
+				return;
+			}
+
 			if (subMenu) {
 				setSubMenuActivated('with-mouse');
 				setHovered(true);
@@ -109,13 +117,17 @@ export const MenuSubItem: React.FC<{
 
 			onActionChosen(id, e);
 		},
-		[id, onActionChosen, setSubMenuActivated, subMenu],
+		[disabled, id, onActionChosen, setSubMenuActivated, subMenu],
 	);
 
 	const onPointerEnter = useCallback(() => {
+		if (disabled) {
+			return;
+		}
+
 		onItemSelected(id);
 		setHovered(true);
-	}, [id, onItemSelected]);
+	}, [disabled, id, onItemSelected]);
 
 	const onPointerLeave = useCallback(() => {
 		setHovered(false);

packages/studio/src/components/NewComposition/ComboBox.tsx

@@ -62,6 +62,7 @@ export type SelectionItem = {
 	leftItem: React.ReactNode;
 	subMenu: SubMenu | null;
 	quickSwitcherLabel: string | null;
+	disabled?: boolean;
 };
 
 export type ComboboxValue = DividerItem | SelectionItem;

packages/studio/src/components/NewComposition/MenuContent.tsx

@@ -72,6 +72,10 @@ export const MenuContent: React.FC<{
 		setSelectedItem(id);
 	}, []);
 
+	const isItemSelectable = useCallback((v: ComboboxValue) => {
+		return v.type !== 'divider' && !v.disabled;
+	}, []);
+
 	const onArrowUp = useCallback(() => {
 		setSelectedItem((prevItem) => {
 			if (prevItem === null) {
@@ -84,41 +88,41 @@ export const MenuContent: React.FC<{
 			}
 
 			const previousItems = values.filter(
-				(v, i) => i < index && v.type !== 'divider',
+				(v, i) => i < index && isItemSelectable(v),
 			);
 			if (previousItems.length > 0) {
 				return previousItems[previousItems.length - 1].id as MenuId;
 			}
 
-			const firstNonDivider = values.find((v) => v.type !== 'divider');
-			if (firstNonDivider) {
-				return firstNonDivider.id as MenuId;
+			const firstSelectable = values.find((v) => isItemSelectable(v));
+			if (firstSelectable) {
+				return firstSelectable.id as MenuId;
 			}
 
 			throw new Error('could not find previous item');
 		});
-	}, [topItemCanBeUnselected, values]);
+	}, [topItemCanBeUnselected, values, isItemSelectable]);
 
 	const onArrowDown = useCallback(() => {
 		setSelectedItem((prevItem) => {
 			const index = values.findIndex((val) => val.id === prevItem);
-			const nextItem = values.find((v, i) => i > index && v.type !== 'divider');
+			const nextItem = values.find((v, i) => i > index && isItemSelectable(v));
 			if (nextItem) {
 				return nextItem.id;
 			}
 
-			const lastNonDivider = values
+			const lastSelectable = values
 				.slice()
 				.reverse()
-				.find((v) => v.type !== 'divider');
+				.find((v) => isItemSelectable(v));
 
-			if (lastNonDivider) {
-				return lastNonDivider.id;
+			if (lastSelectable) {
+				return lastSelectable.id;
 			}
 
 			throw new Error('could not find next item');
 		});
-	}, [values]);
+	}, [values, isItemSelectable]);
 
 	const onEnter = useCallback(() => {
 		if (selectedItem === null) {
@@ -134,6 +138,10 @@ export const MenuContent: React.FC<{
 			throw new Error('cannot find divider');
 		}
 
+		if (item.disabled) {
+			return;
+		}
+
 		if (item.subMenu) {
 			return setSubMenuActivated('without-mouse');
 		}
@@ -342,6 +350,7 @@ export const MenuContent: React.FC<{
 						onNextMenu={onNextMenu}
 						subMenuActivated={subMenuActivated}
 						setSubMenuActivated={setSubMenuActivated}
+						disabled={item.disabled}
 					/>
 				);
 			})}

packages/studio/src/components/RenderModal/WebRenderModal.tsx

@@ -3,11 +3,16 @@ import {getDefaultOutLocation} from '@remotion/studio-shared';
 import type {
 	RenderMediaOnWebProgress,
 	RenderStillOnWebImageFormat,
+	WebRendererAudioCodec,
 	WebRendererContainer,
 	WebRendererQuality,
 	WebRendererVideoCodec,
 } from '@remotion/web-renderer';
-import {renderMediaOnWeb, renderStillOnWeb} from '@remotion/web-renderer';
+import {
+	getDefaultAudioCodecForContainer,
+	renderMediaOnWeb,
+	renderStillOnWeb,
+} from '@remotion/web-renderer';
 import {useCallback, useContext, useMemo, useState} from 'react';
 import {ShortcutHint} from '../../error-overlay/remotion-overlay/ShortcutHint';
 import {AudioIcon} from '../../icons/audio';
@@ -42,6 +47,8 @@ import {
 	ResolveCompositionBeforeModal,
 	ResolvedCompositionContext,
 } from './ResolveCompositionBeforeModal';
+import {useEncodableAudioCodecs} from './use-encodable-audio-codecs';
+import {useEncodableVideoCodecs} from './use-encodable-video-codecs';
 import {WebRendererExperimentalBadge} from './WebRendererExperimentalBadge';
 import {WebRenderModalAdvanced} from './WebRenderModalAdvanced';
 import {WebRenderModalAudio} from './WebRenderModalAudio';
@@ -185,6 +192,9 @@ const WebRenderModal: React.FC<WebRenderModalProps> = ({
 	// Video-specific state
 	const [codec, setCodec] = useState<WebRendererVideoCodec>('h264');
 	const [container, setContainer] = useState<WebRendererContainer>('mp4');
+	const [audioCodec, setAudioCodec] = useState<WebRendererAudioCodec>('aac');
+	const [audioBitrate, setAudioBitrate] =
+		useState<WebRendererQuality>('medium');
 	const [videoBitrate, setVideoBitrate] = useState<WebRendererQuality>('high');
 	const [hardwareAcceleration, setHardwareAcceleration] = useState<
 		'no-preference' | 'prefer-hardware' | 'prefer-software'
@@ -203,6 +213,25 @@ const WebRenderModal: React.FC<WebRenderModalProps> = ({
 
 	const [licenseKey, setLicenseKey] = useState(initialLicenseKey);
 
+	const encodableAudioCodecs = useEncodableAudioCodecs(container);
+	const encodableVideoCodecs = useEncodableVideoCodecs(container);
+
+	const effectiveAudioCodec = useMemo((): WebRendererAudioCodec => {
+		if (encodableAudioCodecs.includes(audioCodec)) {
+			return audioCodec;
+		}
+
+		return encodableAudioCodecs[0] ?? audioCodec;
+	}, [audioCodec, encodableAudioCodecs]);
+
+	const effectiveVideoCodec = useMemo((): WebRendererVideoCodec => {
+		if (encodableVideoCodecs.includes(codec)) {
+			return codec;
+		}
+
+		return encodableVideoCodecs[0] ?? codec;
+	}, [codec, encodableVideoCodecs]);
+
 	const finalEndFrame = useMemo(() => {
 		if (endFrame === null) {
 			return resolvedComposition.durationInFrames - 1;
@@ -258,6 +287,7 @@ const WebRenderModal: React.FC<WebRenderModalProps> = ({
 	const setContainerFormat = useCallback(
 		(newContainer: WebRendererContainer) => {
 			setContainer(newContainer);
+			setAudioCodec(getDefaultAudioCodecForContainer(newContainer));
 			setOutName((prev) => {
 				const newFileName = getStringBeforeSuffix(prev) + '.' + newContainer;
 				return newFileName;
@@ -274,7 +304,7 @@ const WebRenderModal: React.FC<WebRenderModalProps> = ({
 					const newFileName = getStringBeforeSuffix(prev) + '.' + container;
 					return newFileName;
 				});
-			} else {
+			} else if (newMode === 'still') {
 				setOutName((prev) => {
 					const newFileName = getStringBeforeSuffix(prev) + '.' + imageFormat;
 					return newFileName;
@@ -461,7 +491,9 @@ const WebRenderModal: React.FC<WebRenderModalProps> = ({
 			delayRenderTimeoutInMilliseconds: delayRenderTimeout,
 			mediaCacheSizeInBytes,
 			logLevel,
-			videoCodec: codec,
+			videoCodec: effectiveVideoCodec,
+			audioCodec: effectiveAudioCodec,
+			audioBitrate,
 			container,
 			videoBitrate,
 			hardwareAcceleration,
@@ -495,7 +527,9 @@ const WebRenderModal: React.FC<WebRenderModalProps> = ({
 		delayRenderTimeout,
 		mediaCacheSizeInBytes,
 		logLevel,
-		codec,
+		effectiveVideoCodec,
+		effectiveAudioCodec,
+		audioBitrate,
 		container,
 		videoBitrate,
 		hardwareAcceleration,
@@ -623,8 +657,9 @@ const WebRenderModal: React.FC<WebRenderModalProps> = ({
 							onFrameSetDirectly={onFrameSetDirectly}
 							container={container}
 							setContainerFormat={setContainerFormat}
-							codec={codec}
 							setCodec={setCodec}
+							encodableVideoCodecs={encodableVideoCodecs}
+							effectiveVideoCodec={effectiveVideoCodec}
 							startFrame={finalStartFrame}
 							setStartFrame={setStartFrame}
 							endFrame={finalEndFrame}
@@ -659,7 +694,17 @@ const WebRenderModal: React.FC<WebRenderModalProps> = ({
 							setTransparent={setTransparent}
 						/>
 					) : tab === 'audio' ? (
-						<WebRenderModalAudio muted={muted} setMuted={setMuted} />
+						<WebRenderModalAudio
+							muted={muted}
+							setMuted={setMuted}
+							audioCodec={audioCodec}
+							setAudioCodec={setAudioCodec}
+							audioBitrate={audioBitrate}
+							setAudioBitrate={setAudioBitrate}
+							container={container}
+							encodableCodecs={encodableAudioCodecs}
+							effectiveAudioCodec={effectiveAudioCodec}
+						/>
 					) : tab === 'advanced' ? (
 						<WebRenderModalAdvanced
 							renderMode={renderMode}