@remotion/player: Don't create an AudioContext if mounting a <Thumbnail>

packages/core/src/RemotionRoot.tsx

@@ -24,8 +24,8 @@ export const RemotionRootContexts: React.FC<{
 	readonly numberOfAudioTags: number;
 	readonly logLevel: LogLevel;
 	readonly audioLatencyHint: AudioContextLatencyCategory;
-	readonly videoEnabled: boolean | null;
-	readonly audioEnabled: boolean | null;
+	readonly videoEnabled: boolean;
+	readonly audioEnabled: boolean;
 	readonly frameState: Record<string, number> | null;
 }> = ({
 	children,
@@ -87,6 +87,7 @@ export const RemotionRootContexts: React.FC<{
 										<SharedAudioContextProvider
 											numberOfAudioTags={numberOfAudioTags}
 											audioLatencyHint={audioLatencyHint}
+											audioEnabled={audioEnabled}
 										>
 											<DurationsContextProvider>
 												<BufferingProvider>{children}</BufferingProvider>

packages/core/src/audio/AudioForPreview.tsx

@@ -25,7 +25,7 @@ import {
 import {evaluateVolume} from '../volume-prop.js';
 import {warnAboutTooHighVolume} from '../volume-safeguard.js';
 import type {IsExact, NativeAudioProps, RemotionAudioProps} from './props.js';
-import {SharedAudioContext, useSharedAudio} from './shared-audio-tags.js';
+import {useSharedAudio} from './shared-audio-tags.js';
 import {useFrameForVolumeProp} from './use-audio-frame.js';
 
 type AudioForPreviewProps = RemotionAudioProps & {
@@ -165,11 +165,6 @@ const AudioForDevelopmentForwardRefFunction: React.ForwardRefRenderFunction<
 		],
 	);
 
-	const context = useContext(SharedAudioContext);
-	if (!context) {
-		throw new Error('SharedAudioContext not found');
-	}
-
 	const {el: audioRef, mediaElementSourceNode} = useSharedAudio({
 		aud: propsToPass,
 		audioId: id,

packages/core/src/audio/shared-audio-tags.tsx

@@ -118,7 +118,8 @@ export const SharedAudioContextProvider: React.FC<{
 	readonly numberOfAudioTags: number;
 	readonly children: React.ReactNode;
 	readonly audioLatencyHint: AudioContextLatencyCategory;
-}> = ({children, numberOfAudioTags, audioLatencyHint}) => {
+	readonly audioEnabled: boolean;
+}> = ({children, numberOfAudioTags, audioLatencyHint, audioEnabled}) => {
 	const audios = useRef<AudioElem[]>([]);
 	const [initialNumberOfAudioTags] = useState(numberOfAudioTags);
 
@@ -129,7 +130,11 @@ export const SharedAudioContextProvider: React.FC<{
 	}
 
 	const logLevel = useLogLevel();
-	const audioContext = useSingletonAudioContext(logLevel, audioLatencyHint);
+	const audioContext = useSingletonAudioContext({
+		logLevel,
+		latencyHint: audioLatencyHint,
+		audioEnabled,
+	});
 	const refs = useMemo(() => {
 		return new Array(numberOfAudioTags).fill(true).map((): Ref => {
 			const ref = createRef<HTMLAudioElement>();

packages/core/src/audio/use-audio-context.ts

@@ -21,17 +21,26 @@ const warnOnce = (logLevel: LogLevel) => {
 	}
 };
 
-export const useSingletonAudioContext = (
-	logLevel: LogLevel,
-	latencyHint: AudioContextLatencyCategory,
-) => {
+export const useSingletonAudioContext = ({
+	logLevel,
+	latencyHint,
+	audioEnabled,
+}: {
+	logLevel: LogLevel;
+	latencyHint: AudioContextLatencyCategory;
+	audioEnabled: boolean;
+}) => {
 	const env = useRemotionEnvironment();
 
 	const audioContext = useMemo(() => {
 		if (env.isRendering) {
 			return null;
 		}
 
+		if (!audioEnabled) {
+			return null;
+		}
+
 		if (typeof AudioContext === 'undefined') {
 			warnOnce(logLevel);
 			return null;
@@ -44,7 +53,7 @@ export const useSingletonAudioContext = (
 			// we observe some issues that seem to go away when we set the sample rate to 48000 with Sony LinkBuds Bluetooth headphones.
 			sampleRate: 48000,
 		});
-	}, [logLevel, latencyHint, env.isRendering]);
+	}, [logLevel, latencyHint, env.isRendering, audioEnabled]);
 
 	return audioContext;
 };

packages/player/src/Player.tsx

@@ -408,6 +408,7 @@ const PlayerFn = <
 				audioLatencyHint={audioLatencyHint}
 				volumePersistenceKey={volumePersistenceKey}
 				inputProps={actualInputProps}
+				audioEnabled
 			>
 				<Internals.SetTimelineContext.Provider value={setTimelineContextValue}>
 					<PlayerEmitterProvider currentPlaybackRate={currentPlaybackRate}>

packages/player/src/SharedPlayerContext.tsx

@@ -30,6 +30,7 @@ export const SharedPlayerContexts: React.FC<{
 	readonly audioLatencyHint: AudioContextLatencyCategory;
 	readonly volumePersistenceKey?: string;
 	readonly inputProps: Record<string, unknown>;
+	readonly audioEnabled: boolean;
 }> = ({
 	children,
 	timelineContext,
@@ -44,6 +45,7 @@ export const SharedPlayerContexts: React.FC<{
 	audioLatencyHint,
 	volumePersistenceKey,
 	inputProps,
+	audioEnabled,
 }) => {
 	const compositionManagerContext: CompositionManagerContext = useMemo(() => {
 		const context: CompositionManagerContext = {
@@ -152,6 +154,7 @@ export const SharedPlayerContexts: React.FC<{
 											<Internals.SharedAudioContextProvider
 												numberOfAudioTags={numberOfSharedAudioTags}
 												audioLatencyHint={audioLatencyHint}
+												audioEnabled={audioEnabled}
 											>
 												<Internals.BufferingProvider>
 													{children}

packages/player/src/Thumbnail.tsx

@@ -127,6 +127,7 @@ const ThumbnailFn = <
 				logLevel={logLevel}
 				audioLatencyHint="playback"
 				inputProps={passedInputProps}
+				audioEnabled={false}
 			>
 				<ThumbnailEmitterContext.Provider value={emitter}>
 					<ThumbnailUI