add a waveform to the AudioPlayer component

[sndrs]

What does this change?

Adds a waveform to the audio player. There's no way of generating a true representation of the audio without re-fetching it (you can't get audio data from an audio player) which would make an accurate graphic effectively the same file size as the podcast.

Instead, this creates a plausible (but fake) waveform based on the URL of podcast (@oliverabrahams's idea).

So no two podcasts get the same waveform, but the same podcast gets the same each time.

The peak values are also deterministically shuffled so that repetitive URL parts (the host etc) don't end up creating the same shape across URLs.

Why?

a sense of authenticity

Screenshots

Before	After

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Size Change: 0 B

Total Size: 921 kB

ℹ️ View Unchanged

Filename	Size
dotcom-rendering/dist/1000.client.web.********************.js	999 B
dotcom-rendering/dist/1026.client.web.********************.js	784 B
dotcom-rendering/dist/1090.client.web.********************.js	752 B
dotcom-rendering/dist/1156.client.web.********************.js	3.56 kB
dotcom-rendering/dist/1391.client.web.********************.js	725 B
dotcom-rendering/dist/1417.client.web.********************.js	2.53 kB
dotcom-rendering/dist/146.client.web.********************.js	5.29 kB
dotcom-rendering/dist/1476.client.web.********************.js	784 B
dotcom-rendering/dist/1515.client.web.********************.js	6.86 kB
dotcom-rendering/dist/1628.client.web.********************.js	2.87 kB
dotcom-rendering/dist/1667.client.web.********************.js	918 B
dotcom-rendering/dist/1884.client.web.********************.js	3.4 kB
dotcom-rendering/dist/1888.client.web.********************.js	2.92 kB
dotcom-rendering/dist/1904.client.web.********************.js	12.6 kB
dotcom-rendering/dist/1940.client.web.********************.js	507 B
dotcom-rendering/dist/2123.client.web.********************.js	619 B
dotcom-rendering/dist/2182.client.web.********************.js	529 B
dotcom-rendering/dist/2249.client.web.********************.js	4.91 kB
dotcom-rendering/dist/2310.client.web.********************.js	880 B
dotcom-rendering/dist/2455.client.web.********************.js	4.55 kB
dotcom-rendering/dist/267.client.web.********************.js	917 B
dotcom-rendering/dist/281.client.web.********************.js	642 B
dotcom-rendering/dist/3006.client.web.********************.js	4.48 kB
dotcom-rendering/dist/3109.client.web.********************.js	803 B
dotcom-rendering/dist/3270.client.web.********************.js	961 B
dotcom-rendering/dist/3304.client.web.********************.js	853 B
dotcom-rendering/dist/3364.client.web.********************.js	3.97 kB
dotcom-rendering/dist/346.client.web.********************.js	3.21 kB
dotcom-rendering/dist/3769.client.web.********************.js	999 B
dotcom-rendering/dist/3921.client.web.********************.js	2 kB
dotcom-rendering/dist/408.client.web.********************.js	11 kB
dotcom-rendering/dist/4122.client.web.********************.js	1.89 kB
dotcom-rendering/dist/4149.client.web.********************.js	3.77 kB
dotcom-rendering/dist/4282.client.web.********************.js	685 B
dotcom-rendering/dist/4501.client.web.********************.js	4.29 kB
dotcom-rendering/dist/4628.client.web.********************.js	654 B
dotcom-rendering/dist/4769.client.web.********************.js	4.28 kB
dotcom-rendering/dist/4820.client.web.********************.js	2.42 kB
dotcom-rendering/dist/4866.client.web.********************.js	6.32 kB
dotcom-rendering/dist/4903.client.web.********************.js	6.04 kB
dotcom-rendering/dist/4941.client.web.********************.js	890 B
dotcom-rendering/dist/4951.client.web.********************.js	11.4 kB
dotcom-rendering/dist/5087.client.web.********************.js	439 B
dotcom-rendering/dist/5340.client.web.********************.js	3.32 kB
dotcom-rendering/dist/5371.client.web.********************.js	3.34 kB
dotcom-rendering/dist/5412.client.web.********************.js	2.89 kB
dotcom-rendering/dist/5538.client.web.********************.js	6.18 kB
dotcom-rendering/dist/5658.client.web.********************.js	750 B
dotcom-rendering/dist/5757.client.web.********************.js	931 B
dotcom-rendering/dist/5761.client.web.********************.js	4.65 kB
dotcom-rendering/dist/5880.client.web.********************.js	828 B
dotcom-rendering/dist/5937.client.web.********************.js	2.17 kB
dotcom-rendering/dist/5944.client.web.********************.js	5.16 kB
dotcom-rendering/dist/5982.client.web.********************.js	3.78 kB
dotcom-rendering/dist/6044.client.web.********************.js	726 B
dotcom-rendering/dist/6071.client.web.********************.js	577 B
dotcom-rendering/dist/6135.client.web.********************.js	779 B
dotcom-rendering/dist/6261.client.web.********************.js	3.03 kB
dotcom-rendering/dist/6291.client.web.********************.js	4.27 kB
dotcom-rendering/dist/6505.client.web.********************.js	1 kB
dotcom-rendering/dist/6598.client.web.********************.js	780 B
dotcom-rendering/dist/661.client.web.********************.js	3.21 kB
dotcom-rendering/dist/6638.client.web.********************.js	907 B
dotcom-rendering/dist/6665.client.web.********************.js	5.03 kB
dotcom-rendering/dist/6738.client.web.********************.js	6.01 kB
dotcom-rendering/dist/678.client.web.********************.js	804 B
dotcom-rendering/dist/6915.client.web.********************.js	22.7 kB
dotcom-rendering/dist/7072.client.web.********************.js	3.85 kB
dotcom-rendering/dist/7081.client.web.********************.js	20.2 kB
dotcom-rendering/dist/7116.client.web.********************.js	23 kB
dotcom-rendering/dist/7242.client.web.********************.js	4.52 kB
dotcom-rendering/dist/7341.client.web.********************.js	4 kB
dotcom-rendering/dist/7407.client.web.********************.js	3.7 kB
dotcom-rendering/dist/7691.client.web.********************.js	853 B
dotcom-rendering/dist/7713.client.web.********************.js	2.02 kB
dotcom-rendering/dist/7780.client.web.********************.js	2.28 kB
dotcom-rendering/dist/7962.client.web.********************.js	3.58 kB
dotcom-rendering/dist/8103.client.web.********************.js	4.02 kB
dotcom-rendering/dist/83.client.web.********************.js	750 B
dotcom-rendering/dist/8318.client.web.********************.js	2.17 kB
dotcom-rendering/dist/840.client.web.********************.js	3.21 kB
dotcom-rendering/dist/8426.client.web.********************.js	1.91 kB
dotcom-rendering/dist/8437.client.web.********************.js	3.13 kB
dotcom-rendering/dist/8504.client.web.********************.js	827 B
dotcom-rendering/dist/8536.client.web.********************.js	595 B
dotcom-rendering/dist/8626.client.web.********************.js	890 B
dotcom-rendering/dist/8671.client.web.********************.js	157 B
dotcom-rendering/dist/8697.client.web.********************.js	956 B
dotcom-rendering/dist/8730.client.web.********************.js	4.4 kB
dotcom-rendering/dist/8746.client.web.********************.js	3.01 kB
dotcom-rendering/dist/8815.client.web.********************.js	3.86 kB
dotcom-rendering/dist/8822.client.web.********************.js	526 B
dotcom-rendering/dist/8833.client.web.********************.js	829 B
dotcom-rendering/dist/8903.client.web.********************.js	3.83 kB
dotcom-rendering/dist/8990.client.web.********************.js	3.41 kB
dotcom-rendering/dist/9080.client.web.********************.js	3.69 kB
dotcom-rendering/dist/9122.client.web.********************.js	8.08 kB
dotcom-rendering/dist/9132.client.web.********************.js	4.18 kB
dotcom-rendering/dist/9184.client.web.********************.js	493 B
dotcom-rendering/dist/9216.client.web.********************.js	3.45 kB
dotcom-rendering/dist/9373.client.web.********************.js	4.4 kB
dotcom-rendering/dist/940.client.web.********************.js	10.3 kB
dotcom-rendering/dist/9493.client.web.********************.js	785 B
dotcom-rendering/dist/9557.client.web.********************.js	921 B
dotcom-rendering/dist/9608.client.web.********************.js	3.64 kB
dotcom-rendering/dist/9696.client.web.********************.js	5.88 kB
dotcom-rendering/dist/9721.client.web.********************.js	717 B
dotcom-rendering/dist/9736.client.web.********************.js	44.2 kB
dotcom-rendering/dist/9835.client.web.********************.js	647 B
dotcom-rendering/dist/9897.client.web.********************.js	12 kB
dotcom-rendering/dist/9899.client.web.********************.js	669 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js	5.96 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js	2.85 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js	3.94 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js	425 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js	3.57 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js	3.16 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js	3.48 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js	2.52 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js	3.08 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js	4.88 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js	2.54 kB
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js	37.2 kB
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js	1.96 kB
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js	6.72 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js	8.26 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js	2.96 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js	6.68 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js	4.52 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js	539 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js	2.8 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js	1.91 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js	1.22 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js	1.74 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js	3.14 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js	1.72 kB
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js	5.96 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js	3.75 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js	2.02 kB
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js	4.2 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js	1.93 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js	970 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js	619 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js	3.43 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js	347 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js	3.72 kB
dotcom-rendering/dist/frameworks.client.web.********************.js	20.9 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js	7.63 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js	3.82 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js	10.5 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js	7.4 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js	2.22 kB
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js	15.8 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js	10 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js	783 B
dotcom-rendering/dist/index.client.web.********************.js	46 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js	2.79 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js	851 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js	6.28 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js	4.24 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js	4.77 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js	3.62 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js	2.1 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js	435 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js	6.51 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js	3.78 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js	5.28 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js	4.83 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js	7.63 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js	4.98 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js	2.7 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js	4 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js	6.22 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js	5.18 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js	5.32 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js	3.77 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js	543 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js	803 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js	750 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js	542 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js	469 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js	1.97 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js	2.53 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js	6.29 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js	5.01 kB
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js	3.31 kB
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js	3.31 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js	4.61 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js	2.19 kB
dotcom-rendering/dist/sentry.client.web.********************.js	792 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js	3.85 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js	482 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js	3.72 kB
dotcom-rendering/dist/shimport.client.web.********************.js	2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js	733 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js	1.75 kB
dotcom-rendering/dist/SignInGateMain.client.web.********************.js	4.51 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js	5.6 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js	3.16 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js	3.48 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js	4.8 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js	4.22 kB
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js	7.68 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js	2.9 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js	2.7 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js	1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js	14.7 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js	8.25 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js	2.74 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js	1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js	2.8 kB
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js	5.05 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js	4.99 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js	2.66 kB
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js	6.55 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js	5.94 kB

_{compressed-size-action}

[github-actions]

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

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 14269 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[ashishpuliyel]

Alex, I love this!?

[prout-bot]

Seen on PROD (merged by @sndrs 9 minutes and 49 seconds ago) Please check your changes!