add AudioPlayer

Adds an `AudioPlayer` component that uses https://wavesurfer.xyz behind the scenes.

dotcom-rendering/package.json

@@ -108,6 +108,7 @@
 		"@types/webpack-env": "1.18.5",
 		"@types/webpack-node-externals": "3.0.4",
 		"@types/youtube": "0.0.50",
+		"@wavesurfer/react": "1.0.7",
 		"ajv": "8.17.1",
 		"ajv-formats": "2.1.1",
 		"amphtml-validator": "1.0.35",
@@ -190,6 +191,7 @@
 		"typescript-json-schema": "0.64.0",
 		"unified": "11.0.5",
 		"valibot": "0.28.1",
+		"wavesurfer.js": "7.8.6",
 		"web-vitals": "4.2.3",
 		"webpack": "5.94.0",
 		"webpack-assets-manifest": "5.2.1",

dotcom-rendering/src/components/AudioPlayer/AudioPlayer.stories.tsx

@@ -0,0 +1,37 @@
+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 { audioBlob } from './stories/audio-blob';
+
+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: audioBlob,
+		// src: 'https://audio.guim.co.uk/2024/09/23-66750-gnl.sci.20240923.eb.blue_zone_new.mp3',
+	},
+	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;