diff --git a/dotcom-rendering/.storybook/decorators/themeDecorator.tsx b/dotcom-rendering/.storybook/decorators/themeDecorator.tsx
index 1eb110abac2..b1f534ba8ab 100644
--- a/dotcom-rendering/.storybook/decorators/themeDecorator.tsx
+++ b/dotcom-rendering/.storybook/decorators/themeDecorator.tsx
@@ -57,8 +57,9 @@ export const colourSchemeDecorator =
 	<Args = StrictArgs,>(formats: ArticleFormat[]): Decorator<Args> =>
 	(Story, context) => (
 		<>
-			{formats.map((format) => (
+			{formats.map((format, index) => (
 				<div
+					key={index}
 					data-color-scheme={colourScheme}
 					css={css(paletteDeclarations(format, colourScheme))}
 					style={{
diff --git a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.stories.tsx b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.stories.tsx
new file mode 100644
index 00000000000..bb68fbc366d
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { defaultFormats } from '../../../.storybook/decorators/splitThemeDecorator';
+import { allModes } from '../../../.storybook/modes';
+import { AudioPlayer as Player } from './AudioPlayer';
+// import audioFile from './stories/default_audio_test.mp3';
+
+const meta = {
+	title: 'Components/Audio Player',
+	component: Player,
+} satisfies Meta<typeof Player>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AudioPlayer = {
+	args: {
+		// src: audioFile,
+		src: 'https://audio.guim.co.uk/2024/10/18-57753-USEE_181024.mp3',
+		mediaId: 'mediaId',
+		showVolumeControls: true,
+	},
+	parameters: {
+		// We only want to snapshot the `multipleFormats` version below.
+		chromatic: { disable: true },
+	},
+} satisfies Story;
+
+export const MultipleFormats = {
+	args: AudioPlayer.args,
+	parameters: {
+		formats: defaultFormats,
+		chromatic: {
+			modes: {
+				horizontal: allModes.splitHorizontal,
+			},
+		},
+	},
+} satisfies Story;
diff --git a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
new file mode 100644
index 00000000000..eb1fdf6a49a
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
@@ -0,0 +1,355 @@
+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 { Volume } from './components/Volume';
+import { Wrapper } from './components/Wrapper';
+
+// 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;
+
+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;
+	/**
+	 * Optionally hide the volume controls if setting the volume is better
+	 * handled elsewhere, e.g on a mobile device.
+	 */
+	showVolumeControls?: boolean;
+	/** media element ID for Ophan */
+	mediaId: string;
+};
+
+/**
+ * Audio player component.
+ */
+export const AudioPlayer = ({
+	src,
+	duration: preCalculatedDuration,
+	showVolumeControls = true,
+	mediaId,
+}: AudioPlayerProps) => {
+	// ********************* 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]),
+	);
+
+	// wrapper to send audio events to ophan
+	const reportAudioEvent = useCallback(
+		(eventName: AudioEvents) => {
+			const audioEvent: AudioEvent = {
+				id: mediaId,
+				eventType: `audio:content:${eventName}`,
+			};
+
+			void getOphan('Web').then((ophan) => {
+				ophan.record({
+					audio: audioEvent,
+				});
+			});
+		},
+		[mediaId],
+	);
+
+	// ********************* player *********************
+
+	// state for displaying feedback to the user
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [isMuted, setIsMuted] = 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);
+
+	// ******************** events *********************
+
+	const onWaiting = useCallback(() => {
+		setIsWaiting(true);
+	}, []);
+
+	const onCanPlay = useCallback(() => {
+		setIsWaiting(false);
+	}, []);
+
+	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(String(stage) as AudioEvents);
+					}
+				}
+			}
+		}
+	}, [isPlaying, reportAudioEvent]);
+
+	const onPlay = useCallback(() => {
+		setIsPlaying(true);
+
+		if (isFirstPlay.current) {
+			isFirstPlay.current = false;
+
+			reportAudioEvent('play');
+		}
+	}, [reportAudioEvent]);
+
+	const onPause = useCallback(() => {
+		setIsPlaying(false);
+	}, []);
+
+	const onEnded = useCallback(() => {
+		reportAudioEvent('end');
+	}, [reportAudioEvent]);
+
+	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);
+	}, []);
+
+	const mute = useCallback(() => {
+		if (audioRef.current) {
+			audioRef.current.volume = 0;
+			setIsMuted(true);
+		}
+	}, []);
+
+	const unMute = useCallback(() => {
+		if (audioRef.current) {
+			audioRef.current.volume = 1;
+			setIsMuted(false);
+		}
+	}, []);
+
+	// ********************* effects *********************
+
+	useEffect(() => {
+		if (!audioRef.current) return;
+
+		const audio = audioRef.current;
+
+		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,
+		onPause,
+		onEnded,
+		onError,
+		onWaiting,
+		onCanPlay,
+		onProgress,
+	]);
+
+	return (
+		<>
+			{/* native audio player and controls */}
+			<audio
+				src={src}
+				ref={audioRef}
+				autoPlay={false}
+				data-media-id={mediaId}
+				preload="none"
+				controls={false}
+			>
+				<track kind="captions" />
+			</audio>
+
+			{/* custom guardian controls that interact with the native player */}
+			<Wrapper showVolumeControls={showVolumeControls}>
+				<CurrentTime currentTime={currentTime} />
+				<Duration duration={duration} />
+
+				<ProgressBar
+					isScrubbing={isScrubbing}
+					canJumpToPoint={Boolean(audioRef.current?.duration)}
+					buffer={buffer}
+					progress={progress}
+					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>
+
+				{showVolumeControls && (
+					<Volume>
+						<Volume.UnMute onClick={unMute} isMuted={isMuted} />
+						<Volume.Mute onClick={mute} isMuted={isMuted} />
+					</Volume>
+				)}
+			</Wrapper>
+		</>
+	);
+};
diff --git a/dotcom-rendering/src/components/AudioPlayer/components/Playback.tsx b/dotcom-rendering/src/components/AudioPlayer/components/Playback.tsx
new file mode 100644
index 00000000000..1c251e06905
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/components/Playback.tsx
@@ -0,0 +1,115 @@
+import { css } from '@emotion/react';
+import { from, palette } from '@guardian/source/foundations';
+import {
+	Spinner,
+	SvgMediaControlsPause,
+	SvgMediaControlsPlay,
+} from '@guardian/source/react-components';
+import SkipBackIcon from '../../../static/icons/audio/skip-backward-15.svg';
+import SkipForwardIcon from '../../../static/icons/audio/skip-forward-15.svg';
+import { buttonBaseCss } from '../styles';
+
+type ButtonProps = React.ComponentPropsWithoutRef<'button'>;
+
+const SkipButton = (props: ButtonProps) => {
+	return (
+		<button
+			type="button"
+			css={[
+				buttonBaseCss,
+				css`
+					svg {
+						width: 31px;
+						height: 30px;
+					}
+					fill: ${palette.neutral[100]};
+
+					:active {
+						fill: ${palette.brandAlt[400]};
+					}
+
+					:disabled {
+						fill: ${palette.neutral[46]};
+					}
+				`,
+			]}
+			{...props}
+		/>
+	);
+};
+
+export const Playback = (props: React.ComponentPropsWithoutRef<'div'>) => (
+	<div
+		css={css`
+			grid-area: playback;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		`}
+		{...props}
+	/>
+);
+
+Playback.Play = ({
+	isWaiting,
+	isPlaying,
+	...props
+}: {
+	isWaiting: boolean;
+	isPlaying: boolean;
+} & ButtonProps) => {
+	return (
+		<button
+			aria-label="Play"
+			type="button"
+			css={[
+				buttonBaseCss,
+				css`
+					margin: 0 50px;
+					width: 70px;
+					height: 70px;
+					background-color: ${isWaiting
+						? 'none'
+						: palette.brandAlt[400]};
+					border-radius: 50%;
+
+					${from.leftCol} {
+						margin: 0 60px;
+						width: 60px;
+						height: 60px;
+					}
+
+					svg {
+						width: 60px;
+					}
+				`,
+			]}
+			{...props}
+		>
+			{isWaiting ? (
+				<Spinner
+					theme={{
+						background: palette.neutral[20],
+						color: palette.brandAlt[400],
+					}}
+				/>
+			) : isPlaying ? (
+				<SvgMediaControlsPause theme={{ fill: palette.neutral[7] }} />
+			) : (
+				<SvgMediaControlsPlay theme={{ fill: palette.neutral[7] }} />
+			)}
+		</button>
+	);
+};
+
+Playback.SkipBack = (props: Pick<ButtonProps, 'onClick' | 'disabled'>) => (
+	<SkipButton {...props} aria-label="Skip back 15 seconds">
+		<SkipBackIcon />
+	</SkipButton>
+);
+
+Playback.SkipForward = (props: Pick<ButtonProps, 'onClick' | 'disabled'>) => (
+	<SkipButton {...props} aria-label="Skip forward 15 seconds">
+		<SkipForwardIcon />
+	</SkipButton>
+);
diff --git a/dotcom-rendering/src/components/AudioPlayer/components/ProgressBar.tsx b/dotcom-rendering/src/components/AudioPlayer/components/ProgressBar.tsx
new file mode 100644
index 00000000000..a820de6053f
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/components/ProgressBar.tsx
@@ -0,0 +1,111 @@
+import { css } from '@emotion/react';
+import { from, palette } from '@guardian/source/foundations';
+
+const cursorWidth = '4px';
+
+const Cursor = ({
+	isScrubbing,
+	canJumpToPoint,
+	progress,
+}: {
+	isScrubbing: boolean;
+	canJumpToPoint: boolean;
+	progress: number;
+}) => (
+	<div
+		css={css`
+			width: 100%;
+			height: 100%;
+			background-color: ${palette.neutral[60]};
+			transition: transform 10ms ease-out;
+			position: relative;
+			cursor: ${isScrubbing
+				? 'grabbing'
+				: canJumpToPoint
+				? 'pointer'
+				: 'default'};
+
+			/* this is the yellow '|' cursor */
+			border-right: ${cursorWidth} solid ${palette.brandAlt[400]};
+
+			::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				right: -8px;
+				width: 12px;
+				height: 100%;
+				cursor: ${isScrubbing
+					? 'grabbing'
+					: canJumpToPoint
+					? 'grab'
+					: 'default'};
+			}
+		`}
+		style={{
+			transform: `translateX(clamp(-100% + ${cursorWidth}, ${
+				-100 + progress
+			}%, 0%))`,
+		}}
+	></div>
+);
+
+const Buffer = ({ buffer = 0 }: { buffer: number }) => (
+	<div
+		css={css`
+			position: absolute;
+			top: 0;
+			left: 4px;
+			width: 100%;
+			height: 100%;
+			background-color: ${palette.neutral[46]};
+			transition: transform 300ms ease-in;
+		`}
+		style={{
+			transform: `translateX(${-100 + buffer}%)`,
+		}}
+	></div>
+);
+
+export const ProgressBar = ({
+	progress,
+	buffer,
+	isScrubbing,
+	canJumpToPoint,
+	...props
+}: React.ComponentPropsWithoutRef<'div'> & {
+	isScrubbing: boolean;
+	canJumpToPoint: boolean;
+	buffer: number;
+	progress: number;
+}) => {
+	return (
+		<div
+			aria-hidden={true}
+			css={css`
+				grid-area: progress-bar;
+				background-color: ${palette.neutral[38]};
+				border-top: 1px solid ${palette.neutral[46]};
+				position: relative;
+				overflow: hidden;
+				cursor: ${isScrubbing
+					? 'grabbing'
+					: canJumpToPoint
+					? 'pointer'
+					: 'default'};
+
+				${from.leftCol} {
+					border-top: none;
+				}
+			`}
+			{...props}
+		>
+			<Buffer buffer={buffer} />
+			<Cursor
+				isScrubbing={isScrubbing}
+				canJumpToPoint={canJumpToPoint}
+				progress={progress}
+			/>
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/AudioPlayer/components/Volume.tsx b/dotcom-rendering/src/components/AudioPlayer/components/Volume.tsx
new file mode 100644
index 00000000000..ffea1c3ae6e
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/components/Volume.tsx
@@ -0,0 +1,85 @@
+import { css } from '@emotion/react';
+import { from, palette } from '@guardian/source/foundations';
+import { SvgAudio } from '@guardian/source/react-components';
+import { buttonBaseCss } from '../styles';
+
+type ButtonProps = React.ComponentPropsWithoutRef<'button'>;
+
+const Control = (props: ButtonProps) => {
+	return (
+		<button
+			type="button"
+			css={[
+				buttonBaseCss,
+				css`
+					width: 38px;
+
+					svg {
+						height: 30px;
+					}
+				`,
+			]}
+			{...props}
+		/>
+	);
+};
+
+export const Volume = (props: React.ComponentPropsWithoutRef<'div'>) => (
+	<div
+		css={css`
+			grid-area: volume;
+			display: flex;
+			align-items: stretch;
+			justify-content: flex-end;
+
+			span {
+				display: inline-flex;
+				align-items: center;
+				padding-left: 5px;
+				padding-right: 5px;
+			}
+
+			span + span {
+				border-left: 1px solid ${palette.neutral[46]};
+			}
+
+			${from.leftCol} {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				height: 40px;
+			}
+
+			button + button {
+				border-left: 1px solid ${palette.neutral[46]};
+			}
+		`}
+		{...props}
+	/>
+);
+
+Volume.Mute = ({
+	isMuted,
+	...props
+}: { isMuted: boolean } & Omit<ButtonProps, 'children'>) => (
+	<Control aria-label="Mute" {...props}>
+		<SvgAudio
+			theme={{
+				fill: isMuted ? palette.brandAlt[400] : palette.neutral[46],
+			}}
+		/>
+	</Control>
+);
+
+Volume.UnMute = ({
+	isMuted,
+	...props
+}: { isMuted: boolean } & Omit<ButtonProps, 'children'>) => (
+	<Control aria-label="Unmute" {...props}>
+		<SvgAudio
+			theme={{
+				fill: !isMuted ? palette.brandAlt[400] : palette.neutral[46],
+			}}
+		/>
+	</Control>
+);
diff --git a/dotcom-rendering/src/components/AudioPlayer/components/Wrapper.tsx b/dotcom-rendering/src/components/AudioPlayer/components/Wrapper.tsx
new file mode 100644
index 00000000000..e1fd729495a
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/components/Wrapper.tsx
@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+import { from, palette } from '@guardian/source/foundations';
+
+export const Wrapper = ({
+	showVolumeControls,
+	...props
+}: { showVolumeControls: boolean } & React.ComponentPropsWithoutRef<'div'>) => (
+	<div
+		css={css`
+			position: relative;
+			background-color: ${palette.neutral[7]};
+
+			/* define the grid for the component */
+			display: grid;
+			grid-template-rows: ${showVolumeControls
+				? '30px 40px 120px 40px'
+				: '30px 40px 120px'};
+			grid-template-areas:
+				'current-time duration'
+				'progress-bar progress-bar'
+				'playback     playback'
+				'.            volume';
+
+			${from.leftCol} {
+				grid-template-columns: 90px 1fr 90px;
+				grid-template-rows: 50px 110px;
+				grid-template-areas:
+					'current-time progress-bar duration'
+					'playback     playback     playback';
+			}
+		`}
+		{...props}
+	/>
+);
diff --git a/dotcom-rendering/src/components/AudioPlayer/components/time.tsx b/dotcom-rendering/src/components/AudioPlayer/components/time.tsx
new file mode 100644
index 00000000000..74290b4294a
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/components/time.tsx
@@ -0,0 +1,51 @@
+import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
+import { from, palette, textSans15 } from '@guardian/source/foundations';
+import { formatTime } from '../../../lib/formatTime';
+
+const timeCSS = css`
+	padding-top: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	${textSans15};
+	color: ${palette.neutral[86]};
+	background-color: ${palette.neutral[20]};
+	z-index: 1;
+
+	${from.leftCol} {
+		padding-top: 0;
+	}
+`;
+
+export const CurrentTime = ({ currentTime }: { currentTime: number }) => (
+	<time
+		aria-label="Current playing time"
+		css={[
+			timeCSS,
+			css`
+				grid-area: current-time;
+				justify-content: flex-start;
+				padding-left: 10px;
+			`,
+		]}
+	>
+		{formatTime(currentTime)}
+	</time>
+);
+
+export const Duration = ({ duration }: { duration?: number }) => (
+	<time
+		aria-label="Total playing time"
+		css={[
+			timeCSS,
+			css`
+				grid-area: duration;
+				justify-content: flex-end;
+				padding-right: 10px;
+			`,
+		]}
+	>
+		{formatTime(isUndefined(duration) || isNaN(duration) ? 0 : duration)}
+	</time>
+);
diff --git a/dotcom-rendering/src/components/AudioPlayer/stories/default_audio_test.mp3 b/dotcom-rendering/src/components/AudioPlayer/stories/default_audio_test.mp3
new file mode 100644
index 00000000000..11b72947dbc
Binary files /dev/null and b/dotcom-rendering/src/components/AudioPlayer/stories/default_audio_test.mp3 differ
diff --git a/dotcom-rendering/src/components/AudioPlayer/stories/default_audio_test.mp3.d.ts b/dotcom-rendering/src/components/AudioPlayer/stories/default_audio_test.mp3.d.ts
new file mode 100644
index 00000000000..f5711f9c209
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/stories/default_audio_test.mp3.d.ts
@@ -0,0 +1,4 @@
+declare const mp3: string;
+
+// eslint-disable-next-line import/no-default-export -- it's how storybook imports them
+export default mp3;
diff --git a/dotcom-rendering/src/components/AudioPlayer/styles.ts b/dotcom-rendering/src/components/AudioPlayer/styles.ts
new file mode 100644
index 00000000000..ba08402b250
--- /dev/null
+++ b/dotcom-rendering/src/components/AudioPlayer/styles.ts
@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+
+// default base styling for all buttons
+export const buttonBaseCss = css`
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background: none;
+	border: 0;
+	margin: 0;
+	padding: 0;
+
+	:focus {
+		outline: none;
+	}
+
+	:not(:disabled):hover {
+		opacity: 0.8;
+		cursor: pointer;
+	}
+`;
diff --git a/dotcom-rendering/src/static/icons/audio/skip-backward-15.svg b/dotcom-rendering/src/static/icons/audio/skip-backward-15.svg
new file mode 100644
index 00000000000..26a675938a5
--- /dev/null
+++ b/dotcom-rendering/src/static/icons/audio/skip-backward-15.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27">
+  <path d="M1.8 26.1v-8H0v-1.3l2.9-1.1H4V26H1.8Zm6.7.2a6 6 0 0 1-3-.7V24c.6.3 1.4.5 2.3.5 1.5 0 2.3-.5 2.3-1.7s-.8-1.6-2.3-1.6a6 6 0 0 0-2 .3l.4-5.8h5.9v1.8H7.9l-.2 2.2 1.2-.2c2.3 0 3.6 1 3.6 3.3 0 2.2-1.5 3.5-4 3.5ZM7.4 0l.5.5L3.4 6 8 11.4l-.5.5-5.7-5.7v-.5L7.4 0Z"/>
+  <path d="M26 15.8c0-5.7-5-10.3-11-10.3H2.6v1h12.3c5.6 0 10.1 4.2 10.1 9.3 0 5.1-4.4 9.2-9.9 9.3l-.3.3v.5l.3.2c6 0 11-4.7 11-10.3Z"/>
+</svg>
diff --git a/dotcom-rendering/src/static/icons/audio/skip-forward-15.svg b/dotcom-rendering/src/static/icons/audio/skip-forward-15.svg
new file mode 100644
index 00000000000..21d02a1e563
--- /dev/null
+++ b/dotcom-rendering/src/static/icons/audio/skip-forward-15.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 27">
+  <path d="M14.9 26.1v-8h-1.8v-1.3l2.9-1.1h1.2V26h-2.3Zm6.7.2a6 6 0 0 1-3-.7V24c.7.3 1.4.5 2.4.5 1.4 0 2.2-.5 2.2-1.7s-.7-1.6-2.2-1.6a6 6 0 0 0-2 .3l.4-5.8h5.8v1.8h-4.1l-.2 2.2 1.2-.2c2.3 0 3.5 1 3.5 3.3 0 2.2-1.5 3.5-4 3.5Zm2.7-20.6v.5L18.6 12l-.5-.5L22.6 6 18.1.5l.5-.5 5.7 5.7Z"/>
+  <path d="M0 15.8C0 10.1 5 5.5 11.2 5.5h12.3v1H11.2C5.6 6.5 1 10.7 1 15.8 1 20.9 5.4 25 11 25l.2.3v.5l-.3.2C5 26.1 0 21.4 0 15.8Z"/>
+</svg>