Expect frontend to supply audio ad urls

dotcom-rendering/fixtures/generated/fe-articles/Audio.ts

@@ -32,6 +32,8 @@ export const Audio: FEArticle = {
 						source: 'The Guardian',
 					},
 					url: 'https://audio.guim.co.uk/2026/02/27-42462-gdn.alr.060326.NA_GAVIN_FRANCIS_MENTALILLNESS.mp3',
+					urlWithAds:
+						'https://flex.acast.com/audio.guim.co.uk/2026/02/27-42462-gdn.alr.060326.NA_GAVIN_FRANCIS_MENTALILLNESS.mp3',
 					mimeType: 'audio/mpeg',
 				},
 			],

dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx

@@ -185,18 +185,11 @@ const PlaySVG = () => (
 	</svg>
 );
 
-const buildUrl = (basicUrl: string, shouldUseAcast?: boolean) => {
-	return shouldUseAcast
-		? basicUrl.replace('https://', 'https://flex.acast.com/')
-		: basicUrl;
-};
-
 type Props = {
 	id: string;
 	trackUrl: string;
 	kicker: string;
 	title?: string;
-	shouldUseAcast?: boolean;
 	duration: number;
 };
 
@@ -205,7 +198,6 @@ export const AudioAtom = ({
 	trackUrl,
 	kicker,
 	title,
-	shouldUseAcast,
 	duration,
 }: Props): JSX.Element => {
 	const audioEl = useRef<HTMLAudioElement>(null);
@@ -214,10 +206,6 @@ export const AudioAtom = ({
 	// update current time and progress bar position
 	const [currentTime, setCurrentTime] = useState<number>(0);
 	const [percentPlayed, setPercentPlayed] = useState<number>(0);
-	// url
-	const [urlToUse, setUrlToUse] = useState<string>(
-		buildUrl(trackUrl, shouldUseAcast),
-	);
 
 	useEffect(() => {
 		const audioElCurrent = audioEl.current;
@@ -245,7 +233,7 @@ export const AudioAtom = ({
 						updateCurrentTimeAndPosition,
 				  )
 				: undefined;
-	}, [audioEl, setCurrentTime, shouldUseAcast]);
+	}, [audioEl, setCurrentTime]);
 
 	// update duration time
 	const [durationTime, setDurationTime] = useState<number>(duration);
@@ -301,11 +289,6 @@ export const AudioAtom = ({
 		return () => document.removeEventListener('keydown', keyListener);
 	}, [audioEl, progressBarEl]);
 
-	// If Acast is enabled, replace the default url with an ad enabled one
-	useEffect(() => {
-		setUrlToUse(buildUrl(trackUrl, shouldUseAcast));
-	}, [shouldUseAcast, trackUrl]);
-
 	const playAudio = () => {
 		setIsPlaying(true);
 		void audioEl.current?.play();
@@ -330,7 +313,7 @@ export const AudioAtom = ({
 				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- TODO */}
 				<audio
 					css={audioElementStyle}
-					src={urlToUse}
+					src={trackUrl}
 					ref={audioEl}
 					preload="none"
 					data-component="inarticle audio"
@@ -340,7 +323,7 @@ export const AudioAtom = ({
 				>
 					<p>
 						Sorry your browser does not support audio - but you can
-						download here and listen ${urlToUse}
+						download here and listen ${trackUrl}
 					</p>
 				</audio>
 				<div css={audioControlsStyle}>

dotcom-rendering/src/components/AudioAtomWrapper.island.tsx

@@ -5,6 +5,7 @@ import { AudioAtom } from './AudioAtom/AudioAtom';
 type Props = {
 	id: string;
 	trackUrl: string;
+	trackUrlWithAds: string;
 	kicker: string;
 	title?: string | undefined;
 	duration: number;
@@ -26,6 +27,7 @@ type Props = {
 export const AudioAtomWrapper = ({
 	id,
 	trackUrl,
+	trackUrlWithAds,
 	kicker,
 	title,
 	duration,
@@ -37,6 +39,7 @@ export const AudioAtomWrapper = ({
 	// *     ACast     *
 	// *****************
 	const [shouldUseAcast, setShouldUseAcast] = useState<boolean>(false);
+
 	useEffect(() => {
 		onConsentChange((state) => {
 			// Should we use ad enabled audio? If so, then set the shouldUseAcast
@@ -57,11 +60,10 @@ export const AudioAtomWrapper = ({
 	return (
 		<AudioAtom
 			id={id}
-			trackUrl={trackUrl}
+			trackUrl={shouldUseAcast ? trackUrlWithAds : trackUrl}
 			kicker={kicker}
 			title={title}
 			duration={duration}
-			shouldUseAcast={shouldUseAcast}
 		/>
 	);
 };

dotcom-rendering/src/components/AudioPlayerWrapper.island.tsx

@@ -6,6 +6,7 @@ type Props = {
 	mediaId: string;
 	duration?: number;
 	src: string;
+	srcWithAds: string;
 	contentIsNotSensitive: boolean;
 	isAcastEnabled: boolean;
 };
@@ -23,6 +24,7 @@ type Props = {
 export const AudioPlayerWrapper = ({
 	duration,
 	src,
+	srcWithAds,
 	mediaId,
 	contentIsNotSensitive,
 	isAcastEnabled,
@@ -41,13 +43,11 @@ export const AudioPlayerWrapper = ({
 				const consentForAcast = getConsentFor('acast', consentState);
 
 				if (consentForAcast) {
-					setFinalSrc(
-						src.replace('https://', 'https://flex.acast.com/'),
-					);
+					setFinalSrc(srcWithAds);
 				}
 			});
 		}
-	}, [src, contentIsNotSensitive, isAcastEnabled]);
+	}, [src, srcWithAds, contentIsNotSensitive, isAcastEnabled]);
 
 	return <AudioPlayer src={finalSrc} mediaId={mediaId} duration={duration} />;
 };

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -938,6 +938,9 @@
                 "trackUrl": {
                     "type": "string"
                 },
+                "trackUrlWithAds": {
+                    "type": "string"
+                },
                 "duration": {
                     "type": "number"
                 },
@@ -955,7 +958,8 @@
                 "elementId",
                 "id",
                 "kicker",
-                "trackUrl"
+                "trackUrl",
+                "trackUrlWithAds"
             ]
         },
         "RoleType": {
@@ -1002,6 +1006,9 @@
                 "url": {
                     "type": "string"
                 },
+                "urlWithAds": {
+                    "type": "string"
+                },
                 "mimeType": {
                     "type": "string"
                 },
@@ -1024,7 +1031,8 @@
                 }
             },
             "required": [
-                "url"
+                "url",
+                "urlWithAds"
             ]
         },
         "BlockquoteBlockElement": {

dotcom-rendering/src/layouts/AudioLayout.tsx

@@ -335,6 +335,9 @@ export const AudioLayout = (props: WebProps | AppProps) => {
 											!!article.config.switches.acast
 										}
 										src={audioData.audioDownloadUrl}
+										srcWithAds={
+											audioData.audioDownloadUrlWithAds
+										}
 										mediaId={audioData.mediaId}
 									/>
 								</Island>

dotcom-rendering/src/lib/audio-data.ts

@@ -3,7 +3,12 @@ import type { FEElement } from '../types/content';
 export const getAudioData = (
 	mainMediaElements: FEElement[] | undefined,
 ):
-	| { audioDownloadUrl: string; mediaId: string; durationSeconds?: number }
+	| {
+			audioDownloadUrl: string;
+			audioDownloadUrlWithAds: string;
+			mediaId: string;
+			durationSeconds?: number;
+	  }
 	| undefined => {
 	const audioBlockElement = mainMediaElements?.find(
 		(element) =>
@@ -17,6 +22,7 @@ export const getAudioData = (
 		const total = (isNaN(mins) ? 0 : mins) * 60 + (isNaN(secs) ? 0 : secs);
 		return {
 			audioDownloadUrl: audioBlockElement.assets[0].url,
+			audioDownloadUrlWithAds: audioBlockElement.assets[0].urlWithAds,
 			mediaId: audioBlockElement.id,
 			durationSeconds: total > 0 ? total : undefined,
 		};

dotcom-rendering/src/lib/renderElement.tsx

@@ -189,6 +189,7 @@ export const renderElement = ({
 					<AudioAtomWrapper
 						id={element.id}
 						trackUrl={element.trackUrl}
+						trackUrlWithAds={element.trackUrlWithAds}
 						kicker={element.kicker}
 						title={element.title}
 						duration={element.duration}

dotcom-rendering/src/model/block-schema.json

@@ -411,6 +411,9 @@
                 "trackUrl": {
                     "type": "string"
                 },
+                "trackUrlWithAds": {
+                    "type": "string"
+                },
                 "duration": {
                     "type": "number"
                 },
@@ -428,7 +431,8 @@
                 "elementId",
                 "id",
                 "kicker",
-                "trackUrl"
+                "trackUrl",
+                "trackUrlWithAds"
             ]
         },
         "RoleType": {
@@ -475,6 +479,9 @@
                 "url": {
                     "type": "string"
                 },
+                "urlWithAds": {
+                    "type": "string"
+                },
                 "mimeType": {
                     "type": "string"
                 },
@@ -497,7 +504,8 @@
                 }
             },
             "required": [
-                "url"
+                "url",
+                "urlWithAds"
             ]
         },
         "BlockquoteBlockElement": {

dotcom-rendering/src/types/content.ts

@@ -40,6 +40,7 @@ export interface AudioAtomBlockElement {
 	kicker: string;
 	title?: string;
 	trackUrl: string;
+	trackUrlWithAds: string;
 	duration: number;
 	coverUrl: string;
 	role?: RoleType;
@@ -1004,6 +1005,7 @@ export interface VideoAssets {
 
 interface AudioAsset {
 	url: string;
+	urlWithAds: string;
 	mimeType?: string;
 	fields?: {
 		durationMinutes?: string;