{"record":{"id":"088b409c02368a33","repo":"remotion-dev/remotion","slug":"html5audio-is-not-supported-in-remotion-web-ren","errorCode":null,"errorMessage":"<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations","messagePattern":"<Html5Audio> is not supported in @remotion/web-renderer\\. Use <Audio> from @remotion/media instead\\. See https://remotion\\.dev/docs/client-side-rendering/limitations","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/audio/html5-audio.tsx","lineNumber":55,"sourceCode":"\t\tstartFrom,\n\t\tendAt,\n\t\ttrimBefore,\n\t\ttrimAfter,\n\t\tname,\n\t\t_remotionInternalStack,\n\t\tpauseWhenBuffering,\n\t\tshowInTimeline,\n\t\tonError: onRemotionError,\n\t\tfreeze,\n\t\t...otherProps\n\t} = propsWithFreeze;\n\tconst {loop, freeze: _freeze, ...propsOtherThanLoop} = propsWithFreeze;\n\tconst {fps} = useVideoConfig();\n\tconst environment = useRemotionEnvironment();\n\tconst shouldPauseWhenBuffering = resolveV5Default(pauseWhenBuffering);\n\n\tif (environment.isClientSideRendering) {\n\t\tthrow new Error(\n\t\t\t'<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations',\n\t\t);\n\t}\n\n\tif (typeof freeze !== 'undefined') {\n\t\tthrow new TypeError(\n\t\t\t'The \"freeze\" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.',\n\t\t);\n\t}\n\n\tconst {durations, setDurations} = useContext(DurationsContext);\n\tif (typeof props.src !== 'string') {\n\t\tthrow new TypeError(\n\t\t\t`The \\`<Html5Audio>\\` tag requires a string for \\`src\\`, but got ${JSON.stringify(\n\t\t\t\tprops.src,\n\t\t\t)} instead.`,\n\t\t);\n\t}","sourceCodeStart":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/audio/html5-audio.tsx#L37-L73","documentation":"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.","triggerScenarios":"Rendering a composition containing <Html5Audio> (or <Audio> that resolves to Html5Audio) in a client-side-rendering environment such as @remotion/web-renderer.","commonSituations":"Switching from server-side rendering to the web renderer without swapping audio components; importing core <Audio> instead of media <Audio> for CSR.","solutions":["In @remotion/web-renderer, use <Audio> from @remotion/media instead of <Html5Audio>.","If you don't need CSR, ensure the environment is not flagged as client-side rendering.","See the linked docs page for CSR limitations and supported components."],"exampleFix":"// before (in @remotion/web-renderer)\nimport {Audio} from 'remotion';\n<Audio src={src} />\n\n// after\nimport {Audio} from '@remotion/media';\n<Audio src={src} />","handlingStrategy":"validation","validationCode":"import {useRemotionEnvironment} from 'remotion';\nif (useRemotionEnvironment().isClientSideRendering) {\n  // use @remotion/media <Audio> instead of <Html5Audio>\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["In @remotion/web-renderer projects, import <Audio> from @remotion/media.","Gate Html5Audio usage behind a non-CSR environment check."],"tags":["audio","web-renderer","csr","environment"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}