Add audio waveform design to Listen To Article button

[vlbee]

What does this change?

Adds a sound waveform as a background to Listen To Article button in articles rendered for app.
This PR make no other changes to the byline and meta designs.

Why?

Figma: https://www.figma.com/design/bIOvOoy1lz8b6X3wbDI1Z2/In-article-changes?node-id=5805-3607&t=nbPTs4WltsJMOsPp-4

Screenshots

Portrait:

Landscape:

Running Chromatic

In order to run Chromatic as part of the CI checks, you will need to add the run_chromatic label to your PR. Once the label is added Chromatic will run on every push.

Please only add this once you are ready to check for visual regressions, our intention here is to reduce the amount of time Chromatic is run without being looked at.
-->

[github-actions]

Deploy build 46808 of Mobile::mobile-apps-rendering to CODE

All deployment options

• Deploy build 46808 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 46808 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 22552 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 22552 of dotcom:rendering-all to CODE
• Deploy parts of build 22552 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[arelra]

Hi @vlbee there's actually an existing 'fake' waveform component here:

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

Lines 98 to 108 in 4a086f6

	export const WaveForm = ({
	seed,
	height,
	bars,
	progress = 0,
	buffer = 0,
	theme: userTheme,
	gap = 1,
	barWidth = 4,
	...props
	}: Props) => {

It was added in this PR: #12670

I wonder if we could reuse the existing implementation in DCAR rather than creating a new one?

[vlbee]

Hi @vlbee there's actually an existing 'fake' waveform component here:

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

Lines 98 to 108 in 4a086f6

	export const WaveForm = ({
	seed,
	height,
	bars,
	progress = 0,
	buffer = 0,
	theme: userTheme,
	gap = 1,
	barWidth = 4,
	...props
	}: Props) => {

It was added in this PR: #12670

I wonder if we could reuse the existing implementation in DCAR rather than creating a new one?

Thanks @arelra! This looks great. I was trying to mimic the iOS waveform implementation already in use on the apps for the podcast cards, so will show both options to the team. Agree the optimum solution would be to align on this element across platforms.