diff --git a/dotcom-rendering/src/components/AppsAudioPlayButton.stories.tsx b/dotcom-rendering/src/components/AudioPlayer/AppsAudioPlayButton.stories.tsx
similarity index 100%
rename from dotcom-rendering/src/components/AppsAudioPlayButton.stories.tsx
rename to dotcom-rendering/src/components/AudioPlayer/AppsAudioPlayButton.stories.tsx
diff --git a/dotcom-rendering/src/components/AppsAudioPlayButton.tsx b/dotcom-rendering/src/components/AudioPlayer/AppsAudioPlayButton.tsx
similarity index 83%
rename from dotcom-rendering/src/components/AppsAudioPlayButton.tsx
rename to dotcom-rendering/src/components/AudioPlayer/AppsAudioPlayButton.tsx
index 8a9bd63e9a6..7cd48b126d1 100644
--- a/dotcom-rendering/src/components/AppsAudioPlayButton.tsx
+++ b/dotcom-rendering/src/components/AudioPlayer/AppsAudioPlayButton.tsx
@@ -1,4 +1,4 @@
-import { ListenToArticleButton } from './ListenToArticleButton';
+import { ListenToArticleButton } from '../ListenToArticleButton';
 
 type Props = {
 	onClickHandler: () => void;
diff --git a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.stories.tsx b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.stories.tsx
index 48ba6633dd7..bbbc3c5c339 100644
--- a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.stories.tsx
+++ b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.stories.tsx
@@ -1,7 +1,7 @@
 import { defaultFormats } from '../../../.storybook/decorators/splitThemeDecorator';
 import { allModes } from '../../../.storybook/modes';
 import preview from '../../../.storybook/preview';
-import { AudioPlayer as Player } from './AudioPlayer';
+import { AudioPlayerWeb as Player } from './AudioPlayerWeb.island';
 // import audioFile from './stories/default_audio_test.mp3';
 
 const meta = preview.meta({
@@ -14,6 +14,8 @@ export const AudioPlayer = meta.story({
 		// src: audioFile,
 		src: 'https://audio.guim.co.uk/2024/10/18-57753-USEE_181024.mp3',
 		mediaId: 'mediaId',
+		contentIsNotSensitive: true,
+		isAcastEnabled: true,
 	},
 	parameters: {
 		// We only want to snapshot the `multipleFormats` version below.
diff --git a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
index 860317fea42..8c4130fa553 100644
--- a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
+++ b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
@@ -1,308 +1,55 @@
-import { log } from '@guardian/libs';
-import type { AudioEvent, TAudioEventType } from '@guardian/ophan-tracker-js';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { getOphan } from '../../client/ophan/ophan';
-import { Playback } from './components/Playback';
-import { ProgressBar } from './components/ProgressBar';
-import { CurrentTime, Duration } from './components/time';
-import { Wrapper } from './components/Wrapper';
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
+import { palette } from '../../palette';
+import { Island } from '../Island';
+import { formatAudioDuration } from '../ListenToArticle.island';
+import { AudioPlayerApps } from './AudioPlayerApps.island';
+import { AudioPlayerWeb } from './AudioPlayerWeb.island';
 
-// ********************* ophan stuff *********************
-
-// possible events for audio in ophan
-type AudioEvents = TAudioEventType extends `audio:content:${infer E}`
-	? E
-	: never;
-
-// possible progress events for audio in ophan
-type AudioProgressEvents =
-	Extract<AudioEvents, `${number}`> extends `${infer N extends number}`
-		? N
-		: never;
-
-const reportAudioEvent = (mediaId: string, eventName: AudioEvents) => {
-	const audioEvent: AudioEvent = {
-		id: mediaId,
-		eventType: `audio:content:${eventName}`,
-	};
-
-	void getOphan('Web').then((ophan) => {
-		ophan.record({
-			audio: audioEvent,
-		});
-	});
-};
-
-// ********************* Component *********************
-
-type AudioPlayerProps = {
-	/** The audio source you want to play. */
-	src: string;
-	/**
-	 * Optional, pre-computed duration of the audio source.
-	 * If it's not provided it will be calculated once the audio is loaded.
-	 */
-	duration?: number;
-	/** media element ID for Ophan */
-	mediaId: string;
-};
-
-/**
- * Audio player component.
- */
 export const AudioPlayer = ({
-	src,
-	duration: preCalculatedDuration,
-	mediaId,
-}: AudioPlayerProps) => {
-	// ********************* player *********************
-
-	// state for displaying feedback to the user
-	const [isPlaying, setIsPlaying] = useState(false);
-	const [currentTime, setCurrentTime] = useState(0);
-	const [duration, setDuration] = useState(preCalculatedDuration);
-	const [progress, setProgress] = useState(0);
-	const [isWaiting, setIsWaiting] = useState(false);
-	const [isScrubbing, setIsScrubbing] = useState(false);
-	const [buffer, setBuffer] = useState(0);
-
-	const isFirstPlay = useRef(true);
-
-	// ref to the <audio /> element that handles playback
-	const audioRef = useRef<HTMLAudioElement>(null);
-
-	// ********************* ophan stuff *********************
-
-	// we'll send listening progress reports to ophan at these percentage points
-	// through playback (100% is handled by the 'ended' event)
-	const audioProgressEvents = useRef<Set<AudioProgressEvents>>(
-		new Set([25, 50, 75]),
-	);
-
-	// ******************** events *********************
-
-	const onTimeupdate = useCallback(() => {
-		if (audioRef.current) {
-			const newProgress =
-				(audioRef.current.currentTime / audioRef.current.duration) *
-				100;
-
-			setCurrentTime(audioRef.current.currentTime);
-			setProgress(newProgress);
-
-			// Send progress events to ophan,
-			// but only if the audio is playing. We don't want to send these events
-			// just because you skipped around the audio while paused.
-			if (isPlaying) {
-				for (const stage of audioProgressEvents.current) {
-					if (newProgress >= stage) {
-						audioProgressEvents.current.delete(stage);
-						reportAudioEvent(mediaId, String(stage) as AudioEvents);
-					}
-				}
-			}
-		}
-	}, [isPlaying, mediaId]);
-
-	const onPlay = useCallback(() => {
-		setIsPlaying(true);
-
-		if (isFirstPlay.current) {
-			isFirstPlay.current = false;
-			reportAudioEvent(mediaId, 'play');
-		}
-	}, [mediaId]);
-
-	const onProgress = useCallback(() => {
-		if (audioRef.current) {
-			const buffers = audioRef.current.buffered.length;
-			if (buffers === 0) {
-				return;
-			}
-
-			const end = audioRef.current.buffered.end(buffers - 1);
-			setBuffer((end / audioRef.current.duration) * 100);
-		}
-	}, []);
-
-	const onError = useCallback((event: Event) => {
-		window.guardian.modules.sentry.reportError(
-			new Error(event.type),
-			'audio-player',
-		);
-		log('dotcom', 'Audio player error:', event);
-	}, []);
-
-	// Set the duration to what we now *know* it is.
-	// If we already had the correct duration, this will be a no-op anyway.
-	const onDurationChange = useCallback(() => {
-		if (audioRef.current) {
-			setDuration(audioRef.current.duration);
-		}
-	}, []);
-
-	// ********************* interactions *********************
-
-	const boundingClientRect = useRef<DOMRect>();
-
-	const playPause = useCallback(() => {
-		if (audioRef.current) {
-			if (audioRef.current.paused) {
-				void audioRef.current.play().catch(onError);
-			} else {
-				audioRef.current.pause();
-				setIsWaiting(false);
-			}
-		}
-	}, [onError]);
-
-	const skipForward = useCallback(() => {
-		if (audioRef.current) {
-			audioRef.current.currentTime = Math.min(
-				audioRef.current.currentTime + 15,
-				audioRef.current.duration,
-			);
-		}
-	}, []);
-
-	const skipBackward = useCallback(() => {
-		if (audioRef.current) {
-			audioRef.current.currentTime = Math.max(
-				audioRef.current.currentTime - 15,
-				0,
-			);
-		}
-	}, []);
-
-	const setPlaybackTime = useCallback(
-		(newTime: number) => {
-			if (audioRef.current) {
-				audioRef.current.currentTime = newTime;
-			}
-		},
-		[audioRef],
-	);
-
-	const jumpToPoint = useCallback(
-		(event: React.MouseEvent<HTMLDivElement>) => {
-			if (audioRef.current && !isNaN(audioRef.current.duration)) {
-				setIsScrubbing(true);
-
-				boundingClientRect.current =
-					event.currentTarget.getBoundingClientRect();
-
-				const { width, left } = boundingClientRect.current;
-				const clickX = event.clientX - left;
-				const newTime = (clickX / width) * audioRef.current.duration;
-
-				setPlaybackTime(newTime);
-			}
-		},
-		[setPlaybackTime],
-	);
-
-	const scrub = useCallback(
-		(event: React.MouseEvent<HTMLDivElement>) => {
-			if (isScrubbing && audioRef.current && boundingClientRect.current) {
-				const { width, left } = boundingClientRect.current;
-				const eventX = event.clientX - left;
-				const newTime = (eventX / width) * audioRef.current.duration;
-				setPlaybackTime(newTime);
-			}
-		},
-		[isScrubbing, setPlaybackTime],
-	);
-
-	const stopScrubbing = useCallback(() => {
-		setIsScrubbing(false);
-	}, []);
-
-	// ********************* effects *********************
-
-	useEffect(() => {
-		if (!audioRef.current) {
-			return;
-		}
-
-		const audio = audioRef.current;
-
-		const onPause = () => setIsPlaying(false);
-		const onEnded = () => reportAudioEvent(mediaId, 'end');
-
-		const onWaiting = () => setIsWaiting(true);
-		const onCanPlay = () => setIsWaiting(false);
-
-		audio.addEventListener('waiting', onWaiting);
-		audio.addEventListener('canplay', onCanPlay);
-		audio.addEventListener('timeupdate', onTimeupdate);
-		audio.addEventListener('seeking', onTimeupdate);
-		audio.addEventListener('durationchange', onDurationChange);
-		audio.addEventListener('play', onPlay);
-		audio.addEventListener('pause', onPause);
-		audio.addEventListener('ended', onEnded);
-		audio.addEventListener('error', onError);
-		audio.addEventListener('progress', onProgress);
-
-		return () => {
-			audio.removeEventListener('waiting', onWaiting);
-			audio.removeEventListener('canplay', onCanPlay);
-			audio.removeEventListener('timeupdate', onTimeupdate);
-			audio.removeEventListener('seeking', onTimeupdate);
-			audio.removeEventListener('durationchange', onDurationChange);
-			audio.removeEventListener('play', onPlay);
-			audio.removeEventListener('pause', onPause);
-			audio.removeEventListener('ended', onEnded);
-			audio.removeEventListener('error', onError);
-			audio.removeEventListener('progress', onProgress);
-		};
-	}, [onTimeupdate, onDurationChange, onPlay, onError, onProgress, mediaId]);
-
+	audioData,
+	isSensitive,
+	isAcastEnabled,
+	isApps,
+}: {
+	audioData: {
+		audioDownloadUrl: string;
+		durationSeconds?: number;
+		mediaId: string;
+	};
+	isSensitive: boolean;
+	isAcastEnabled: boolean;
+	isApps: boolean;
+}) => {
 	return (
 		<>
-			{/* native audio player and controls */}
-			<audio
-				ref={audioRef}
-				autoPlay={false}
-				data-media-id={mediaId}
-				preload="none"
-				controls={false}
-			>
-				<source src={src} type="audio/mpeg" />
-				<track kind="captions" />
-			</audio>
-
-			{/* custom guardian controls that interact with the native player */}
-			<Wrapper>
-				<CurrentTime currentTime={currentTime} />
-				<Duration duration={duration} />
-
-				<ProgressBar
-					isScrubbing={isScrubbing}
-					canJumpToPoint={Boolean(audioRef.current?.duration)}
-					buffer={buffer}
-					progress={progress}
-					src={src}
-					onMouseDown={jumpToPoint}
-					onMouseUp={stopScrubbing}
-					onMouseMove={scrub}
-				/>
-
-				<Playback>
-					<Playback.SkipBack
-						onClick={skipBackward}
-						disabled={isWaiting || !isPlaying}
-					/>
-					<Playback.Play
-						isWaiting={isWaiting}
-						isPlaying={isPlaying}
-						onClick={playPause}
+			<Island priority="critical" defer={{ until: 'visible' }}>
+				{isApps ? (
+					<AudioPlayerApps
+						audioDuration={
+							typeof audioData.durationSeconds === 'number'
+								? formatAudioDuration(audioData.durationSeconds)
+								: undefined
+						}
 					/>
-					<Playback.SkipForward
-						onClick={skipForward}
-						disabled={isWaiting || !isPlaying}
+				) : (
+					<AudioPlayerWeb
+						contentIsNotSensitive={!isSensitive}
+						isAcastEnabled={isAcastEnabled}
+						src={audioData.audioDownloadUrl}
+						mediaId={audioData.mediaId}
 					/>
-				</Playback>
-			</Wrapper>
+				)}
+			</Island>
+			<StraightLines
+				cssOverrides={css`
+					display: block;
+					margin-bottom: ${space[2]}px;
+				`}
+				count={1}
+				color={palette('--straight-lines')}
+			/>
 		</>
 	);
 };
diff --git a/dotcom-rendering/src/components/AppsAudioPlayer.island.tsx b/dotcom-rendering/src/components/AudioPlayer/AudioPlayerApps.island.tsx
similarity index 90%
rename from dotcom-rendering/src/components/AppsAudioPlayer.island.tsx
rename to dotcom-rendering/src/components/AudioPlayer/AudioPlayerApps.island.tsx
index 800e5af3698..2f212c449b0 100644
--- a/dotcom-rendering/src/components/AppsAudioPlayer.island.tsx
+++ b/dotcom-rendering/src/components/AudioPlayer/AudioPlayerApps.island.tsx
@@ -1,7 +1,7 @@
 import { log } from '@guardian/libs';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { getAudioClient } from '../lib/bridgetApi';
-import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible';
+import { getAudioClient } from '../../lib/bridgetApi';
+import { useIsBridgetCompatible } from '../../lib/useIsBridgetCompatible';
 import { AppsAudioPlayButton } from './AppsAudioPlayButton';
 
 const AUDIO_BRIDGET_VERSION = '8.9.0';
@@ -11,7 +11,7 @@ type Props = {
 	audioDuration?: string;
 };
 
-export const AppsAudioPlayer = ({ audioDuration }: Props) => {
+export const AudioPlayerApps = ({ audioDuration }: Props) => {
 	const [showButton, setShowButton] = useState<boolean>(false);
 	const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
diff --git a/dotcom-rendering/src/components/AudioPlayer/AudioPlayerWeb.island.tsx b/dotcom-rendering/src/components/AudioPlayer/AudioPlayerWeb.island.tsx
new file mode 100644
index 00000000000..d9358d6d705
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/AudioPlayerWeb.island.tsx
@@ -0,0 +1,335 @@
+import { getConsentFor, onConsentChange } from '@guardian/consent-manager';
+import { log } from '@guardian/libs';
+import type { AudioEvent, TAudioEventType } from '@guardian/ophan-tracker-js';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getOphan } from '../../client/ophan/ophan';
+import { Playback } from './components/Playback';
+import { ProgressBar } from './components/ProgressBar';
+import { CurrentTime, Duration } from './components/time';
+import { Wrapper } from './components/Wrapper';
+
+// ********************* Ophan stuff *********************
+
+// possible events for audio in ophan
+type AudioEvents = TAudioEventType extends `audio:content:${infer E}`
+	? E
+	: never;
+
+// possible progress events for audio in ophan
+type AudioProgressEvents =
+	Extract<AudioEvents, `${number}`> extends `${infer N extends number}`
+		? N
+		: never;
+
+const reportAudioEvent = (mediaId: string, eventName: AudioEvents) => {
+	const audioEvent: AudioEvent = {
+		id: mediaId,
+		eventType: `audio:content:${eventName}`,
+	};
+
+	void getOphan('Web').then((ophan) => {
+		ophan.record({
+			audio: audioEvent,
+		});
+	});
+};
+
+// ********************* Component *********************
+
+type AudioPlayerProps = {
+	/** media element ID for Ophan */
+	mediaId: string;
+	/**
+	 * Optional, pre-computed duration of the audio source.
+	 * If it's not provided it will be calculated once the audio is loaded.
+	 */
+	duration?: number;
+	/** The audio source you want to play. */
+	src: string;
+	contentIsNotSensitive: boolean;
+	isAcastEnabled: boolean;
+};
+
+/**
+ * Audio player component.
+ */
+export const AudioPlayerWeb = ({
+	duration: preCalculatedDuration,
+	src,
+	mediaId,
+	contentIsNotSensitive,
+	isAcastEnabled,
+}: AudioPlayerProps) => {
+	const [finalSrc, setFinalSrc] = useState<string>(src);
+
+	useEffect(() => {
+		// this is how frontend checks for whether to show ads or not,
+		// and it's on the window in DCR but it's not clear how...
+		// so this just carries over the existing logic
+		// https://github.com/guardian/frontend/blob/ba57677baaa06f37235e8d7a983cb383d0f5c989/static/src/javascripts/projects/common/modules/audio/index.js#L25-L44
+		const isPodcast = window.guardian.config.page.isPodcast;
+
+		if (contentIsNotSensitive && isAcastEnabled && isPodcast) {
+			onConsentChange((consentState) => {
+				const consentForAcast = getConsentFor('acast', consentState);
+
+				if (consentForAcast) {
+					setFinalSrc(
+						src.replace('https://', 'https://flex.acast.com/'),
+					);
+				}
+			});
+		}
+	}, [src, contentIsNotSensitive, isAcastEnabled]);
+
+	// ********************* player *********************
+
+	// state for displaying feedback to the user
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [duration, setDuration] = useState(preCalculatedDuration);
+	const [progress, setProgress] = useState(0);
+	const [isWaiting, setIsWaiting] = useState(false);
+	const [isScrubbing, setIsScrubbing] = useState(false);
+	const [buffer, setBuffer] = useState(0);
+
+	const isFirstPlay = useRef(true);
+
+	// ref to the <audio /> element that handles playback
+	const audioRef = useRef<HTMLAudioElement>(null);
+
+	// ********************* ophan stuff *********************
+
+	// we'll send listening progress reports to ophan at these percentage points
+	// through playback (100% is handled by the 'ended' event)
+	const audioProgressEvents = useRef<Set<AudioProgressEvents>>(
+		new Set([25, 50, 75]),
+	);
+
+	// ******************** events *********************
+
+	const onTimeupdate = useCallback(() => {
+		if (audioRef.current) {
+			const newProgress =
+				(audioRef.current.currentTime / audioRef.current.duration) *
+				100;
+
+			setCurrentTime(audioRef.current.currentTime);
+			setProgress(newProgress);
+
+			// Send progress events to ophan,
+			// but only if the audio is playing. We don't want to send these events
+			// just because you skipped around the audio while paused.
+			if (isPlaying) {
+				for (const stage of audioProgressEvents.current) {
+					if (newProgress >= stage) {
+						audioProgressEvents.current.delete(stage);
+						reportAudioEvent(mediaId, String(stage) as AudioEvents);
+					}
+				}
+			}
+		}
+	}, [isPlaying, mediaId]);
+
+	const onPlay = useCallback(() => {
+		setIsPlaying(true);
+
+		if (isFirstPlay.current) {
+			isFirstPlay.current = false;
+			reportAudioEvent(mediaId, 'play');
+		}
+	}, [mediaId]);
+
+	const onProgress = useCallback(() => {
+		if (audioRef.current) {
+			const buffers = audioRef.current.buffered.length;
+			if (buffers === 0) {
+				return;
+			}
+
+			const end = audioRef.current.buffered.end(buffers - 1);
+			setBuffer((end / audioRef.current.duration) * 100);
+		}
+	}, []);
+
+	const onError = useCallback((event: Event) => {
+		window.guardian.modules.sentry.reportError(
+			new Error(event.type),
+			'audio-player',
+		);
+		log('dotcom', 'Audio player error:', event);
+	}, []);
+
+	// Set the duration to what we now *know* it is.
+	// If we already had the correct duration, this will be a no-op anyway.
+	const onDurationChange = useCallback(() => {
+		if (audioRef.current) {
+			setDuration(audioRef.current.duration);
+		}
+	}, []);
+
+	// ********************* interactions *********************
+
+	const boundingClientRect = useRef<DOMRect>();
+
+	const playPause = useCallback(() => {
+		if (audioRef.current) {
+			if (audioRef.current.paused) {
+				void audioRef.current.play().catch(onError);
+			} else {
+				audioRef.current.pause();
+				setIsWaiting(false);
+			}
+		}
+	}, [onError]);
+
+	const skipForward = useCallback(() => {
+		if (audioRef.current) {
+			audioRef.current.currentTime = Math.min(
+				audioRef.current.currentTime + 15,
+				audioRef.current.duration,
+			);
+		}
+	}, []);
+
+	const skipBackward = useCallback(() => {
+		if (audioRef.current) {
+			audioRef.current.currentTime = Math.max(
+				audioRef.current.currentTime - 15,
+				0,
+			);
+		}
+	}, []);
+
+	const setPlaybackTime = useCallback(
+		(newTime: number) => {
+			if (audioRef.current) {
+				audioRef.current.currentTime = newTime;
+			}
+		},
+		[audioRef],
+	);
+
+	const jumpToPoint = useCallback(
+		(event: React.MouseEvent<HTMLDivElement>) => {
+			if (audioRef.current && !isNaN(audioRef.current.duration)) {
+				setIsScrubbing(true);
+
+				boundingClientRect.current =
+					event.currentTarget.getBoundingClientRect();
+
+				const { width, left } = boundingClientRect.current;
+				const clickX = event.clientX - left;
+				const newTime = (clickX / width) * audioRef.current.duration;
+
+				setPlaybackTime(newTime);
+			}
+		},
+		[setPlaybackTime],
+	);
+
+	const scrub = useCallback(
+		(event: React.MouseEvent<HTMLDivElement>) => {
+			if (isScrubbing && audioRef.current && boundingClientRect.current) {
+				const { width, left } = boundingClientRect.current;
+				const eventX = event.clientX - left;
+				const newTime = (eventX / width) * audioRef.current.duration;
+				setPlaybackTime(newTime);
+			}
+		},
+		[isScrubbing, setPlaybackTime],
+	);
+
+	const stopScrubbing = useCallback(() => {
+		setIsScrubbing(false);
+	}, []);
+
+	// ********************* effects *********************
+
+	useEffect(() => {
+		if (!audioRef.current) {
+			return;
+		}
+
+		const audio = audioRef.current;
+
+		const onPause = () => setIsPlaying(false);
+		const onEnded = () => reportAudioEvent(mediaId, 'end');
+
+		const onWaiting = () => setIsWaiting(true);
+		const onCanPlay = () => setIsWaiting(false);
+
+		audio.addEventListener('waiting', onWaiting);
+		audio.addEventListener('canplay', onCanPlay);
+		audio.addEventListener('timeupdate', onTimeupdate);
+		audio.addEventListener('seeking', onTimeupdate);
+		audio.addEventListener('durationchange', onDurationChange);
+		audio.addEventListener('play', onPlay);
+		audio.addEventListener('pause', onPause);
+		audio.addEventListener('ended', onEnded);
+		audio.addEventListener('error', onError);
+		audio.addEventListener('progress', onProgress);
+
+		return () => {
+			audio.removeEventListener('waiting', onWaiting);
+			audio.removeEventListener('canplay', onCanPlay);
+			audio.removeEventListener('timeupdate', onTimeupdate);
+			audio.removeEventListener('seeking', onTimeupdate);
+			audio.removeEventListener('durationchange', onDurationChange);
+			audio.removeEventListener('play', onPlay);
+			audio.removeEventListener('pause', onPause);
+			audio.removeEventListener('ended', onEnded);
+			audio.removeEventListener('error', onError);
+			audio.removeEventListener('progress', onProgress);
+		};
+	}, [onTimeupdate, onDurationChange, onPlay, onError, onProgress, mediaId]);
+
+	return (
+		<>
+			{/* native audio player and controls */}
+			<audio
+				ref={audioRef}
+				autoPlay={false}
+				data-media-id={mediaId}
+				preload="none"
+				controls={false}
+			>
+				<source src={finalSrc} type="audio/mpeg" />
+				<track kind="captions" />
+			</audio>
+
+			{/* custom guardian controls that interact with the native player */}
+			<Wrapper>
+				<CurrentTime currentTime={currentTime} />
+				<Duration duration={duration} />
+
+				<ProgressBar
+					isScrubbing={isScrubbing}
+					canJumpToPoint={Boolean(audioRef.current?.duration)}
+					buffer={buffer}
+					progress={progress}
+					src={finalSrc}
+					onMouseDown={jumpToPoint}
+					onMouseUp={stopScrubbing}
+					onMouseMove={scrub}
+				/>
+
+				<Playback>
+					<Playback.SkipBack
+						onClick={skipBackward}
+						disabled={isWaiting || !isPlaying}
+					/>
+					<Playback.Play
+						isWaiting={isWaiting}
+						isPlaying={isPlaying}
+						onClick={playPause}
+					/>
+					<Playback.SkipForward
+						onClick={skipForward}
+						disabled={isWaiting || !isPlaying}
+					/>
+				</Playback>
+			</Wrapper>
+		</>
+	);
+};
diff --git a/dotcom-rendering/src/components/AudioPlayerWrapper.island.tsx b/dotcom-rendering/src/components/AudioPlayerWrapper.island.tsx
deleted file mode 100644
index c16daa328eb..00000000000
--- a/dotcom-rendering/src/components/AudioPlayerWrapper.island.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { getConsentFor, onConsentChange } from '@guardian/consent-manager';
-import { useEffect, useState } from 'react';
-import { AudioPlayer } from './AudioPlayer/AudioPlayer';
-
-type Props = {
-	mediaId: string;
-	duration?: number;
-	src: string;
-	contentIsNotSensitive: boolean;
-	isAcastEnabled: boolean;
-};
-
-/**
- * ## Why does this need to be an Island?
- *
- * The audio player is interactive.
- * Requires consent to use audio ads.
- *
- * ---
- *
- * (No visual story exists)
- */
-export const AudioPlayerWrapper = ({
-	duration,
-	src,
-	mediaId,
-	contentIsNotSensitive,
-	isAcastEnabled,
-}: Props) => {
-	const [finalSrc, setFinalSrc] = useState<string>(src);
-
-	useEffect(() => {
-		// this is how frontend checks for whether to show ads or not,
-		// and it's on the window in DCR but it's not clear how...
-		// so this just carries over the existing logic
-		// https://github.com/guardian/frontend/blob/ba57677baaa06f37235e8d7a983cb383d0f5c989/static/src/javascripts/projects/common/modules/audio/index.js#L25-L44
-		const isPodcast = window.guardian.config.page.isPodcast;
-
-		if (contentIsNotSensitive && isAcastEnabled && isPodcast) {
-			onConsentChange((consentState) => {
-				const consentForAcast = getConsentFor('acast', consentState);
-
-				if (consentForAcast) {
-					setFinalSrc(
-						src.replace('https://', 'https://flex.acast.com/'),
-					);
-				}
-			});
-		}
-	}, [src, contentIsNotSensitive, isAcastEnabled]);
-
-	return <AudioPlayer src={finalSrc} mediaId={mediaId} duration={duration} />;
-};
diff --git a/dotcom-rendering/src/layouts/AudioLayout.stories.tsx b/dotcom-rendering/src/layouts/AudioLayout.stories.tsx
deleted file mode 100644
index 9227a2e43d9..00000000000
--- a/dotcom-rendering/src/layouts/AudioLayout.stories.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { allModes } from '../../.storybook/modes';
-import { Audio as AudioFixture } from '../../fixtures/generated/fe-articles/Audio';
-import { ArticleDesign } from '../lib/articleFormat';
-import { getCurrentPillar } from '../lib/layoutHelpers';
-import { extractNAV } from '../model/extract-nav';
-import { enhanceArticleType } from '../types/article';
-import { AudioLayout } from './AudioLayout';
-
-const meta = {
-	title: 'Layouts/Audio',
-	component: AudioLayout,
-} satisfies Meta<typeof AudioLayout>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const appsArticle = enhanceArticleType(AudioFixture, 'Apps');
-
-if (appsArticle.design !== ArticleDesign.Audio) {
-	throw new Error(
-		`Expected ArticleDesign.Audio, got: ${String(appsArticle.design)}`,
-	);
-}
-
-export const Apps: Story = {
-	args: {
-		renderingTarget: 'Apps',
-		article: appsArticle.frontendData,
-		format: {
-			design: appsArticle.design,
-			display: appsArticle.display,
-			theme: appsArticle.theme,
-		},
-	},
-	parameters: {
-		formats: [
-			{
-				design: appsArticle.design,
-				display: appsArticle.display,
-				theme: appsArticle.theme,
-			},
-		],
-		config: {
-			renderingTarget: 'Apps',
-			darkModeAvailable: true,
-		},
-		chromatic: {
-			modes: {
-				'light mobileMedium': allModes['light mobileMedium'],
-			},
-		},
-	},
-};
-
-const webArticle = enhanceArticleType(AudioFixture, 'Web');
-
-if (webArticle.design !== ArticleDesign.Audio) {
-	throw new Error(
-		`Expected ArticleDesign.Audio, got: ${String(webArticle.design)}`,
-	);
-}
-
-export const Web: Story = {
-	args: {
-		renderingTarget: 'Web',
-		NAV: {
-			...extractNAV(webArticle.frontendData.nav),
-			selectedPillar: getCurrentPillar(webArticle.frontendData),
-		},
-		article: webArticle.frontendData,
-		format: {
-			design: webArticle.design,
-			display: webArticle.display,
-			theme: webArticle.theme,
-		},
-	},
-	parameters: {
-		formats: [
-			{
-				design: webArticle.design,
-				display: webArticle.display,
-				theme: webArticle.theme,
-			},
-		],
-		chromatic: {
-			modes: {
-				'light leftCol': allModes['light leftCol'],
-			},
-		},
-	},
-};
diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx
deleted file mode 100644
index 9c5c4ed0c18..00000000000
--- a/dotcom-rendering/src/layouts/AudioLayout.tsx
+++ /dev/null
@@ -1,756 +0,0 @@
-import { css } from '@emotion/react';
-import {
-	from,
-	palette as sourcePalette,
-	space,
-	until,
-} from '@guardian/source/foundations';
-import { StraightLines } from '@guardian/source-development-kitchen/react-components';
-import { AdPortals } from '../components/AdPortals.island';
-import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
-import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
-import { AppsAudioPlayer } from '../components/AppsAudioPlayer.island';
-import { AppsFooter } from '../components/AppsFooter.island';
-import { ArticleBody } from '../components/ArticleBody';
-import { ArticleContainer } from '../components/ArticleContainer';
-import { ArticleHeadline } from '../components/ArticleHeadline';
-import { ArticleMetaApps } from '../components/ArticleMeta.apps';
-import { ArticleMeta } from '../components/ArticleMeta.web';
-import { ArticleTitle } from '../components/ArticleTitle';
-import { AudioPlayerWrapper } from '../components/AudioPlayerWrapper.island';
-import { Border } from '../components/Border';
-import { Carousel } from '../components/Carousel.island';
-import { DirectoryPageNavIsland } from '../components/DirectoryPageNavIsland';
-import { DiscussionLayout } from '../components/DiscussionLayout';
-import { Footer } from '../components/Footer';
-import { GridItem } from '../components/GridItem';
-import { HeaderAdSlot } from '../components/HeaderAdSlot';
-import { Island } from '../components/Island';
-import { LabsHeader } from '../components/LabsHeader';
-import { formatAudioDuration } from '../components/ListenToArticle.island';
-import { Masthead } from '../components/Masthead/Masthead';
-import { MostViewedFooterData } from '../components/MostViewedFooterData.island';
-import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
-import { MostViewedRightWithAd } from '../components/MostViewedRightWithAd.island';
-import { OnwardsUpper } from '../components/OnwardsUpper.island';
-import { RightColumn } from '../components/RightColumn';
-import { Section } from '../components/Section';
-import { SlotBodyEnd } from '../components/SlotBodyEnd.island';
-import { Standfirst } from '../components/Standfirst';
-import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
-import { SubMeta } from '../components/SubMeta';
-import { SubNav } from '../components/SubNav.island';
-import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat';
-import { getAudioData } from '../lib/audio-data';
-import { canRenderAds } from '../lib/canRenderAds';
-import { getContributionsServiceUrl } from '../lib/contributions';
-import { decideStoryPackageTrails } from '../lib/decideTrail';
-import { parse } from '../lib/slot-machine-flags';
-import { worldCupTagId } from '../lib/worldCup2026';
-import type { NavType } from '../model/extract-nav';
-import { palette as themePalette } from '../palette';
-import type { ArticleDeprecated } from '../types/article';
-import type { RenderingTarget } from '../types/renderingTarget';
-import { BannerWrapper, Stuck } from './lib/stickiness';
-
-const AudioGrid = ({ children }: { children: React.ReactNode }) => (
-	<div
-		css={css`
-			/* IE Fallback */
-			display: flex;
-			flex-direction: column;
-			${until.leftCol} {
-				margin-left: 0;
-			}
-			${from.leftCol} {
-				margin-left: 151px;
-			}
-			${from.wide} {
-				margin-left: 230px;
-			}
-
-			@supports (display: grid) {
-				display: grid;
-				width: 100%;
-				margin-left: 0;
-				grid-column-gap: 0;
-				grid-template-columns: 100%; /* Main content */
-				grid-template-areas:
-					'title'
-					'headline'
-					'disclaimer'
-					'media'
-					'standfirst'
-					'meta'
-					'body';
-				${from.desktop} {
-					grid-template-columns: 620px 300px;
-					grid-template-areas:
-						'title         .'
-						'headline      .'
-						'disclaimer    right-column'
-						'media         right-column'
-						'standfirst     right-column'
-						'meta          right-column'
-						'body          right-column'
-						'.             right-column';
-				}
-				${from.leftCol} {
-					grid-column-gap: 10px;
-					grid-template-columns: 140px 1px 620px 300px;
-					grid-template-areas:
-						'title  border  headline     .'
-						'.      border  disclaimer   right-column'
-						'meta   border  media        right-column'
-						'meta   border  standfirst    right-column'
-						'meta   border  body         right-column'
-						'.      border  .            right-column';
-				}
-				${from.wide} {
-					grid-template-columns: 219px 1px 620px 80px 300px;
-					grid-template-areas:
-						'title  border  headline   .     .'
-						'.  	border  disclaimer .     right-column'
-						'meta   border  media      media right-column'
-						'meta   border  standfirst  .     right-column'
-						'meta   border  body       .     right-column'
-						'.      border  .          .     right-column';
-				}
-			}
-		`}
-	>
-		{children}
-	</div>
-);
-
-const maxWidth = css`
-	${from.desktop} {
-		max-width: 620px;
-	}
-`;
-
-interface Props {
-	article: ArticleDeprecated;
-	format: ArticleFormat;
-	renderingTarget: RenderingTarget;
-	serverTime?: number;
-}
-
-interface WebProps extends Props {
-	NAV: NavType;
-	renderingTarget: 'Web';
-}
-
-interface AppProps extends Props {
-	renderingTarget: 'Apps';
-}
-
-export const AudioLayout = (props: WebProps | AppProps) => {
-	const { article, format, renderingTarget, serverTime } = props;
-	const isWeb = renderingTarget === 'Web';
-	const isApps = renderingTarget === 'Apps';
-	const audioData = getAudioData(article.mainMediaElements);
-
-	const {
-		config: { isPaidContent, host, hasSurveyAd },
-		editionId,
-	} = article;
-
-	const showBodyEndSlot = parse(article.slotMachineFlags ?? '').showBodyEnd;
-
-	const showComments = article.isCommentable && !isPaidContent;
-
-	const { branding } = article.commercialProperties[article.editionId];
-
-	const contributionsServiceUrl = getContributionsServiceUrl(article);
-
-	const isLabs = format.theme === ArticleSpecial.Labs;
-
-	const isWorldCup2026 = article.tags.some((tag) => tag.id === worldCupTagId);
-
-	const renderAds = canRenderAds(article);
-
-	return (
-		<>
-			{isWeb && (
-				<div data-print-layout="hide" id="bannerandheader">
-					{renderAds && (
-						<Stuck>
-							<Section
-								fullWidth={true}
-								showTopBorder={false}
-								showSideBorders={false}
-								padSides={false}
-								shouldCenter={false}
-							>
-								<HeaderAdSlot />
-							</Section>
-						</Stuck>
-					)}
-					<Masthead
-						nav={props.NAV}
-						editionId={article.editionId}
-						idUrl={article.config.idUrl}
-						mmaUrl={article.config.mmaUrl}
-						discussionApiUrl={article.config.discussionApiUrl}
-						idApiUrl={article.config.idApiUrl}
-						contributionsServiceUrl={contributionsServiceUrl}
-						showSubNav={!isLabs && !isWorldCup2026}
-						showSlimNav={false}
-						hasPageSkinContentSelfConstrain={true}
-						pageId={article.pageId}
-						sectionId={article.config.section}
-						tagIds={article.tags.map((tag) => tag.id)}
-						contentType={article.contentType}
-					/>
-				</div>
-			)}
-
-			{isWeb && format.theme === ArticleSpecial.Labs && (
-				<Stuck zIndex="subNavBanner">
-					<Section
-						fullWidth={true}
-						showTopBorder={false}
-						backgroundColour={sourcePalette.labs[400]}
-						borderColour={sourcePalette.neutral[60]}
-						sectionId="labs-header"
-						element="aside"
-					>
-						<LabsHeader editionId={editionId} />
-					</Section>
-				</Stuck>
-			)}
-
-			{isWeb && renderAds && hasSurveyAd && (
-				<AdSlot position="survey" display={format.display} />
-			)}
-
-			<main data-layout="AudioLayout">
-				{isApps && renderAds && (
-					<Island priority="critical">
-						<AdPortals />
-					</Island>
-				)}
-				<DirectoryPageNavIsland
-					pageTags={article.tags}
-					pageId={article.pageId}
-				/>
-
-				<Section
-					fullWidth={true}
-					showTopBorder={false}
-					backgroundColour={themePalette('--article-background')}
-					borderColour={themePalette('--article-border')}
-					innerBackgroundColour={themePalette(
-						'--article-inner-background',
-					)}
-					element="article"
-				>
-					<AudioGrid>
-						<GridItem area="title" element="aside">
-							<ArticleTitle
-								format={format}
-								tags={article.tags}
-								sectionLabel={article.sectionLabel}
-								sectionUrl={article.sectionUrl}
-								guardianBaseURL={article.guardianBaseURL}
-							/>
-						</GridItem>
-						<GridItem area="border">
-							{format.theme === ArticleSpecial.Labs ? (
-								<></>
-							) : (
-								<Border />
-							)}
-						</GridItem>
-						<GridItem area="headline">
-							<div css={maxWidth}>
-								<ArticleHeadline
-									format={format}
-									headlineString={article.headline}
-									tags={article.tags}
-									byline={article.byline}
-									webPublicationDateDeprecated={
-										article.webPublicationDateDeprecated
-									}
-								/>
-							</div>
-						</GridItem>
-						<GridItem area="meta" element="aside">
-							<div css={maxWidth}>
-								{renderingTarget === 'Web' ? (
-									<ArticleMeta
-										branding={branding}
-										format={format}
-										pageId={article.pageId}
-										webTitle={article.webTitle}
-										byline={article.byline}
-										source={article.config.source}
-										tags={article.tags}
-										primaryDateline={
-											article.webPublicationDateDisplay
-										}
-										secondaryDateline={
-											article.webPublicationSecondaryDateDisplay
-										}
-										isCommentable={article.isCommentable}
-										discussionApiUrl={
-											article.config.discussionApiUrl
-										}
-										shortUrlId={article.config.shortUrlId}
-										mainMediaElements={
-											article.mainMediaElements
-										}
-									/>
-								) : (
-									<ArticleMetaApps
-										branding={branding}
-										format={format}
-										pageId={article.pageId}
-										byline={article.byline}
-										tags={article.tags}
-										primaryDateline={
-											article.webPublicationDateDisplay
-										}
-										secondaryDateline={
-											article.webPublicationSecondaryDateDisplay
-										}
-										isCommentable={article.isCommentable}
-										discussionApiUrl={
-											article.config.discussionApiUrl
-										}
-										shortUrlId={article.config.shortUrlId}
-										mainMediaElements={
-											article.mainMediaElements
-										}
-									/>
-								)}
-								{!!article.affiliateLinksDisclaimer && (
-									<AffiliateDisclaimer />
-								)}
-							</div>
-						</GridItem>
-						<GridItem area="media">
-							{isWeb && audioData && (
-								<Island
-									priority="critical"
-									defer={{ until: 'visible' }}
-								>
-									<AudioPlayerWrapper
-										contentIsNotSensitive={
-											!article.config.isSensitive
-										}
-										isAcastEnabled={
-											!!article.config.switches.acast
-										}
-										src={audioData.audioDownloadUrl}
-										mediaId={audioData.mediaId}
-									/>
-								</Island>
-							)}
-							{isApps && audioData && (
-								<Island
-									priority="critical"
-									defer={{ until: 'visible' }}
-								>
-									<AppsAudioPlayer
-										audioDuration={
-											typeof audioData.durationSeconds ===
-											'number'
-												? formatAudioDuration(
-														audioData.durationSeconds,
-													)
-												: undefined
-										}
-									/>
-								</Island>
-							)}
-							<StraightLines
-								cssOverrides={css`
-									display: block;
-									margin-bottom: ${space[2]}px;
-								`}
-								count={1}
-								color={themePalette('--straight-lines')}
-							/>
-						</GridItem>
-						<GridItem area="standfirst">
-							<Standfirst
-								format={format}
-								standfirst={article.standfirst}
-							/>
-						</GridItem>
-						<GridItem area="body">
-							<ArticleContainer format={format}>
-								<ArticleBody
-									format={format}
-									blocks={article.blocks}
-									pinnedPost={article.pinnedPost}
-									host={host}
-									pageId={article.pageId}
-									webTitle={article.webTitle}
-									ajaxUrl={article.config.ajaxUrl}
-									switches={article.config.switches}
-									isSensitive={article.config.isSensitive}
-									isAdFreeUser={article.isAdFreeUser}
-									sectionId={article.config.section}
-									shouldHideReaderRevenue={
-										article.shouldHideReaderRevenue
-									}
-									tags={article.tags}
-									isPaidContent={
-										!!article.config.isPaidContent
-									}
-									contributionsServiceUrl={
-										contributionsServiceUrl
-									}
-									contentType={article.contentType}
-									isPreview={article.config.isPreview}
-									idUrl={article.config.idUrl ?? ''}
-									isDev={!!article.config.isDev}
-									keywordIds={article.config.keywordIds}
-									tableOfContents={article.tableOfContents}
-									lang={article.lang}
-									isRightToLeftLang={
-										article.isRightToLeftLang
-									}
-									editionId={article.editionId}
-									shouldHideAds={article.shouldHideAds}
-									idApiUrl={article.config.idApiUrl}
-								/>
-								{isWeb && showBodyEndSlot && (
-									<Island
-										priority="feature"
-										defer={{ until: 'visible' }}
-									>
-										<SlotBodyEnd
-											contentType={article.contentType}
-											contributionsServiceUrl={
-												contributionsServiceUrl
-											}
-											idApiUrl={article.config.idApiUrl}
-											isMinuteArticle={
-												article.pageType.isMinuteArticle
-											}
-											isPaidContent={
-												article.pageType.isPaidContent
-											}
-											pageId={article.pageId}
-											sectionId={article.config.section}
-											shouldHideReaderRevenue={
-												article.shouldHideReaderRevenue
-											}
-											tags={article.tags}
-											renderAds={renderAds}
-											isLabs={isLabs}
-											articleEndSlot={
-												!!article.config.switches
-													.articleEndSlot
-											}
-											isSensitive={
-												article.config.isSensitive
-											}
-										/>
-									</Island>
-								)}
-								<StraightLines
-									data-print-layout="hide"
-									count={4}
-									cssOverrides={css`
-										display: block;
-									`}
-									color={themePalette('--straight-lines')}
-								/>
-								<SubMeta
-									format={format}
-									subMetaKeywordLinks={
-										article.subMetaKeywordLinks
-									}
-									subMetaSectionLinks={
-										article.subMetaSectionLinks
-									}
-									pageId={article.pageId}
-									webUrl={article.webURL}
-									webTitle={article.webTitle}
-									showBottomSocialButtons={
-										article.showBottomSocialButtons
-									}
-								/>
-							</ArticleContainer>
-						</GridItem>
-						<GridItem area="right-column">
-							{isWeb && (
-								<div
-									css={css`
-										padding-top: 0;
-										height: 100%;
-										${from.desktop} {
-											/* above 980 */
-											margin-left: 20px;
-											margin-right: -20px;
-											padding-bottom: 41px;
-										}
-										${from.leftCol} {
-											/* above 1140 */
-											margin-left: 0;
-											margin-right: 0;
-										}
-									`}
-								>
-									<RightColumn>
-										<Island
-											priority="feature"
-											defer={{
-												until: 'visible',
-												// Provide a much higher value for the top margin for the intersection observer
-												// This is because the most viewed would otherwise only be lazy loaded when the
-												// bottom of the container intersects with the viewport
-												rootMargin: '700px 100px',
-											}}
-										>
-											<MostViewedRightWithAd
-												format={format}
-												isPaidContent={
-													article.pageType
-														.isPaidContent
-												}
-												renderAds={renderAds}
-												shouldHideReaderRevenue={
-													!!article.config
-														.shouldHideReaderRevenue
-												}
-												shouldHideMostViewed={true}
-											/>
-										</Island>
-									</RightColumn>
-								</div>
-							)}
-						</GridItem>
-					</AudioGrid>
-				</Section>
-
-				{isWeb && renderAds && !isLabs && (
-					<Section
-						fullWidth={true}
-						padSides={false}
-						showTopBorder={false}
-						showSideBorders={false}
-						backgroundColour={themePalette('--ad-background')}
-						element="aside"
-					>
-						<AdSlot
-							data-print-layout="hide"
-							position="merchandising-high"
-							display={format.display}
-						/>
-					</Section>
-				)}
-
-				{article.storyPackage && (
-					<Section
-						fullWidth={true}
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-					>
-						<Island priority="feature" defer={{ until: 'visible' }}>
-							<Carousel
-								heading={article.storyPackage.heading}
-								trails={decideStoryPackageTrails(
-									article.storyPackage.trails,
-									article.webURL,
-								)}
-								onwardsSource="more-on-this-story"
-								format={format}
-								leftColSize={'compact'}
-								discussionApiUrl={
-									article.config.discussionApiUrl
-								}
-								serverTime={serverTime}
-								renderingTarget={renderingTarget}
-							/>
-						</Island>
-					</Section>
-				)}
-
-				<Island priority="feature" defer={{ until: 'visible' }}>
-					<OnwardsUpper
-						ajaxUrl={article.config.ajaxUrl}
-						hasRelated={article.hasRelated}
-						hasStoryPackage={article.hasStoryPackage}
-						isAdFreeUser={article.isAdFreeUser}
-						pageId={article.pageId}
-						isPaidContent={!!article.config.isPaidContent}
-						showRelatedContent={article.config.showRelatedContent}
-						keywordIds={article.config.keywordIds}
-						contentType={article.contentType}
-						tags={article.tags}
-						format={format}
-						pillar={format.theme}
-						editionId={article.editionId}
-						shortUrlId={article.config.shortUrlId}
-						discussionApiUrl={article.config.discussionApiUrl}
-						serverTime={serverTime}
-						renderingTarget={renderingTarget}
-						webURL={article.webURL}
-					/>
-				</Island>
-				{isWeb && showComments && (
-					<Section
-						fullWidth={true}
-						sectionId="comments"
-						element="section"
-						backgroundColour={themePalette(
-							'--discussion-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--discussion-text')}
-					>
-						<DiscussionLayout
-							discussionApiUrl={article.config.discussionApiUrl}
-							shortUrlId={article.config.shortUrlId}
-							format={format}
-							discussionD2Uid={article.config.discussionD2Uid}
-							discussionApiClientHeader={
-								article.config.discussionApiClientHeader
-							}
-							enableDiscussionSwitch={
-								!!article.config.switches.enableDiscussionSwitch
-							}
-							isAdFreeUser={article.isAdFreeUser}
-							shouldHideAds={article.shouldHideAds}
-							idApiUrl={article.config.idApiUrl}
-						/>
-					</Section>
-				)}
-
-				{!isPaidContent && (
-					<Section
-						title="Most viewed"
-						padContent={false}
-						verticalMargins={false}
-						element="aside"
-						data-link-name="most-popular"
-						data-component="most-popular"
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-					>
-						<MostViewedFooterLayout renderAds={renderAds}>
-							<Island
-								priority="feature"
-								defer={{ until: 'visible' }}
-							>
-								<MostViewedFooterData
-									sectionId={article.config.section}
-									ajaxUrl={article.config.ajaxUrl}
-									edition={article.editionId}
-								/>
-							</Island>
-						</MostViewedFooterLayout>
-					</Section>
-				)}
-
-				{isWeb && renderAds && !isLabs && (
-					<Section
-						fullWidth={true}
-						padSides={false}
-						showTopBorder={false}
-						showSideBorders={false}
-						backgroundColour={themePalette('--ad-background')}
-						element="aside"
-					>
-						<AdSlot
-							position="merchandising"
-							display={format.display}
-						/>
-					</Section>
-				)}
-			</main>
-
-			{isWeb && (
-				<>
-					{props.NAV.subNavSections && (
-						<Section
-							fullWidth={true}
-							padSides={false}
-							element="aside"
-						>
-							<Island
-								priority="enhancement"
-								defer={{ until: 'visible' }}
-							>
-								<SubNav
-									subNavSections={props.NAV.subNavSections}
-									currentNavLink={props.NAV.currentNavLink}
-									position="footer"
-								/>
-							</Island>
-						</Section>
-					)}
-					<Section
-						fullWidth={true}
-						padSides={false}
-						backgroundColour={sourcePalette.brand[400]}
-						borderColour={sourcePalette.brand[600]}
-						showSideBorders={false}
-						element="footer"
-					>
-						<Footer
-							pageFooter={article.pageFooter}
-							selectedPillar={props.NAV.selectedPillar}
-							pillars={props.NAV.pillars}
-							urls={article.nav.readerRevenueLinks.footer}
-							editionId={article.editionId}
-						/>
-					</Section>
-					<BannerWrapper data-print-layout="hide">
-						<Island priority="feature" defer={{ until: 'idle' }}>
-							<StickyBottomBanner
-								contentType={article.contentType}
-								contributionsServiceUrl={
-									contributionsServiceUrl
-								}
-								idApiUrl={article.config.idApiUrl}
-								isMinuteArticle={
-									article.pageType.isMinuteArticle
-								}
-								isPaidContent={article.pageType.isPaidContent}
-								isPreview={!!article.config.isPreview}
-								isSensitive={article.config.isSensitive}
-								pageId={article.pageId}
-								sectionId={article.config.section}
-								shouldHideReaderRevenue={
-									article.shouldHideReaderRevenue
-								}
-								remoteBannerSwitch={
-									!!article.config.switches.remoteBanner
-								}
-								tags={article.tags}
-								host={host}
-							/>
-						</Island>
-					</BannerWrapper>
-					{renderAds && (
-						<MobileStickyContainer data-print-layout="hide" />
-					)}
-				</>
-			)}
-			{isApps && (
-				<div
-					css={{
-						backgroundColor: themePalette(
-							'--apps-footer-background',
-						),
-					}}
-				>
-					<Island priority="critical">
-						<AppsFooter design={format.design} />
-					</Island>
-				</div>
-			)}
-		</>
-	);
-};
diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx
index b6dd7f4a27c..7724a3dbd64 100644
--- a/dotcom-rendering/src/layouts/DecideLayout.tsx
+++ b/dotcom-rendering/src/layouts/DecideLayout.tsx
@@ -2,7 +2,6 @@ import { ArticleDesign, ArticleDisplay } from '../lib/articleFormat';
 import type { NavType } from '../model/extract-nav';
 import type { Article } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
-import { AudioLayout } from './AudioLayout';
 import { CommentLayout } from './CommentLayout';
 import { CrosswordLayout } from './CrosswordLayout';
 import { FullPageInteractiveLayout } from './FullPageInteractiveLayout';
@@ -191,7 +190,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 					);
 				case ArticleDesign.Audio:
 					return (
-						<AudioLayout
+						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							renderingTarget={renderingTarget}
@@ -353,7 +352,7 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 					);
 				case ArticleDesign.Audio:
 					return (
-						<AudioLayout
+						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							NAV={NAV}
diff --git a/dotcom-rendering/src/layouts/StandardLayout.stories.tsx b/dotcom-rendering/src/layouts/StandardLayout.stories.tsx
new file mode 100644
index 00000000000..f4d94df458f
--- /dev/null
+++ b/dotcom-rendering/src/layouts/StandardLayout.stories.tsx
@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { allModes } from '../../.storybook/modes';
+import { Audio as AudioFixture } from '../../fixtures/generated/fe-articles/Audio';
+import { ArticleDesign } from '../lib/articleFormat';
+import { getCurrentPillar } from '../lib/layoutHelpers';
+import { extractNAV } from '../model/extract-nav';
+import { enhanceArticleType } from '../types/article';
+import { StandardLayout } from './StandardLayout';
+
+const meta = {
+	title: 'Layouts/Standard',
+	component: StandardLayout,
+} satisfies Meta<typeof StandardLayout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const appsAudioArticle = enhanceArticleType(AudioFixture, 'Apps');
+
+if (appsAudioArticle.design !== ArticleDesign.Audio) {
+	throw new Error(
+		`Expected ArticleDesign.Audio, got: ${String(appsAudioArticle.design)}`,
+	);
+}
+
+export const AppsAudio: Story = {
+	args: {
+		renderingTarget: 'Apps',
+		article: appsAudioArticle.frontendData,
+		format: {
+			design: appsAudioArticle.design,
+			display: appsAudioArticle.display,
+			theme: appsAudioArticle.theme,
+		},
+	},
+	parameters: {
+		formats: [
+			{
+				design: appsAudioArticle.design,
+				display: appsAudioArticle.display,
+				theme: appsAudioArticle.theme,
+			},
+		],
+		config: {
+			renderingTarget: 'Apps',
+			darkModeAvailable: true,
+		},
+		chromatic: {
+			modes: {
+				'light mobileMedium': allModes['light mobileMedium'],
+			},
+		},
+	},
+};
+
+const webAudioArticle = enhanceArticleType(AudioFixture, 'Web');
+
+if (webAudioArticle.design !== ArticleDesign.Audio) {
+	throw new Error(
+		`Expected ArticleDesign.Audio, got: ${String(webAudioArticle.design)}`,
+	);
+}
+
+export const WebAudio: Story = {
+	args: {
+		renderingTarget: 'Web',
+		NAV: {
+			...extractNAV(webAudioArticle.frontendData.nav),
+			selectedPillar: getCurrentPillar(webAudioArticle.frontendData),
+		},
+		article: webAudioArticle.frontendData,
+		format: {
+			design: webAudioArticle.design,
+			display: webAudioArticle.display,
+			theme: webAudioArticle.theme,
+		},
+	},
+	parameters: {
+		formats: [
+			{
+				design: webAudioArticle.design,
+				display: webAudioArticle.display,
+				theme: webAudioArticle.theme,
+			},
+		],
+		chromatic: {
+			modes: {
+				'light leftCol': allModes['light leftCol'],
+			},
+		},
+	},
+};
diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
index 4d6aab78791..2f0c2388c94 100644
--- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
@@ -11,6 +11,7 @@ import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
+import { AudioPlayer } from '../components/AudioPlayer/AudioPlayer';
 import { DecideLines } from '../components/DecideLines';
 import { FootballMatchInfoWrapper } from '../components/FootballMatchInfoWrapper.island';
 import { GuardianLabsLines } from '../components/GuardianLabsLines';
@@ -28,6 +29,7 @@ import {
 	type ArticleFormat,
 	ArticleSpecial,
 } from '../lib/articleFormat';
+import { getAudioData } from '../lib/audio-data';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { safeParseURL } from '../lib/parse';
 import { parse } from '../lib/slot-machine-flags';
@@ -111,8 +113,6 @@ export const StandardLayoutArticleGrid = ({
 		format.design === ArticleDesign.Audio;
 	const isShowcase = format.display === ArticleDisplay.Showcase;
 
-	const isVideo = format.design === ArticleDesign.Video;
-
 	const footballMatchUrl =
 		article.matchType === 'FootballMatchType'
 			? article.matchUrl
@@ -121,6 +121,8 @@ export const StandardLayoutArticleGrid = ({
 	const isFootballMatchReport =
 		format.design === ArticleDesign.MatchReport && !!footballMatchUrl;
 
+	const audioData = getAudioData(article.mainMediaElements);
+
 	const layoutType: LayoutType = isMedia
 		? 'media'
 		: isShowcase
@@ -144,22 +146,33 @@ export const StandardLayoutArticleGrid = ({
 			]}
 		>
 			<GridItem area="media" layoutType={layoutType}>
-				<MainMedia
-					format={format}
-					elements={article.mainMediaElements}
-					host={host}
-					pageId={article.pageId}
-					webTitle={article.webTitle}
-					ajaxUrl={article.config.ajaxUrl}
-					switches={article.config.switches}
-					isAdFreeUser={article.isAdFreeUser}
-					isSensitive={article.config.isSensitive}
-					editionId={article.editionId}
-					hideCaption={isMedia}
-					shouldHideAds={article.shouldHideAds}
-					contentType={article.contentType}
-					contentLayout={`${ArticleDisplay[format.display]}Layout`}
-				/>
+				{format.design === ArticleDesign.Audio && audioData ? (
+					<AudioPlayer
+						audioData={audioData}
+						isSensitive={article.config.isSensitive}
+						isAcastEnabled={!!article.config.switches.acast}
+						isApps={isApps}
+					/>
+				) : (
+					<MainMedia
+						format={format}
+						elements={article.mainMediaElements}
+						host={host}
+						pageId={article.pageId}
+						webTitle={article.webTitle}
+						ajaxUrl={article.config.ajaxUrl}
+						switches={article.config.switches}
+						isAdFreeUser={article.isAdFreeUser}
+						isSensitive={article.config.isSensitive}
+						editionId={article.editionId}
+						hideCaption={isMedia}
+						shouldHideAds={article.shouldHideAds}
+						contentType={article.contentType}
+						contentLayout={`${
+							ArticleDisplay[format.display]
+						}Layout`}
+					/>
+				)}
 			</GridItem>
 			<GridItem area="title" layoutType={layoutType} element="aside">
 				<ArticleTitle
@@ -187,18 +200,20 @@ export const StandardLayoutArticleGrid = ({
 				<Standfirst format={format} standfirst={article.standfirst} />
 			</GridItem>
 			<GridItem area="meta" layoutType={layoutType} element="aside">
-				<div css={stretchLines}>
-					{isWeb &&
-					format.theme === ArticleSpecial.Labs &&
-					format.design !== ArticleDesign.Video ? (
-						<GuardianLabsLines />
-					) : (
-						<DecideLines
-							format={format}
-							color={themePalette('--article-border')}
-						/>
-					)}
-				</div>
+				{format.design !== ArticleDesign.Audio && (
+					<div css={stretchLines}>
+						{isWeb &&
+						format.theme === ArticleSpecial.Labs &&
+						format.design !== ArticleDesign.Video ? (
+							<GuardianLabsLines />
+						) : (
+							<DecideLines
+								format={format}
+								color={themePalette('--article-border')}
+							/>
+						)}
+					</div>
+				)}
 				{isApps ? (
 					<>
 						<Hide from="leftCol">
@@ -279,7 +294,7 @@ export const StandardLayoutArticleGrid = ({
 				{/* Only show Listen to Article button on App landscape views */}
 				{isApps && (
 					<Hide until="leftCol">
-						{!isVideo && (
+						{!isMedia && (
 							<div
 								css={css`
 									margin-top: ${space[2]}px;
@@ -419,6 +434,7 @@ export const StandardLayoutArticleGrid = ({
 							shouldHideReaderRevenue={
 								!!article.config.shouldHideReaderRevenue
 							}
+							shouldHideMostViewed={!!audioData}
 						/>
 					</Island>
 				</Hide>