The Telegraph - Podcast Player and Embed Dashboard

In a one-week sprint at The Telegraph, I designed and built a prototype podcast player and an editorial embedding dashboard. The project replaced a generic third-party embed with a player styled for Telegraph articles, while still pulling live audio and metadata from the newsroom's existing Art19 hosting platform.

The Challenge

The Telegraph hosted its podcasts on Art19, but the default embed player clashed with the newspaper's article design and gave editors very little flexibility when promoting shows inside stories.

The product team wanted to explore what we could build on top of Art19's APIs without changing how audio producers uploaded or managed their shows. Within a week, I needed to:

The Stack

The Solution

Integrating with the Art19 API

Because fetching every series and resolving cover art across the entire Telegraph podcast network on every page load would be slow, I wrote a Node.js script to query The Telegraph's network catalogue, match each show to its square cover art, and generate a lightweight series index.

At runtime, the player and dashboard combined this index with live requests to Art19's episodes endpoint to pull the latest releases, MP3 stream URLs, durations, descriptions, and subscription links for Apple Podcasts, Spotify, Pocket Casts, and RSS.

Custom Audio Player and Artwork Backdrop

Working with a product designer, I built a custom player in Preact and CSS Grid that matched The Telegraph's editorial typography and layout. To give each show its own visual identity without manual colour picking, the player used the active episode's cover art as a background layer treated with CSS blur, contrast, and saturation backdrop filters over a soft gradient fade.

Under the hood, I built a custom HTML5 audio controller and range scrubber:

Editorial Episode Picker Dashboard

To make the player easy for journalists to use, I built a companion single-page dashboard app. Editors could browse a visual grid of all Telegraph podcasts or select a series from a dropdown, check release dates, and choose from three embed modes:

  1. Always latest episode: Automatically played the newest episode in that series whenever a reader loaded the article.
  2. Specific episode: Locked the embed to a chosen episode.
  3. Show playlist: Rendered the player with an interactive list of recent episodes from the series.

Whenever an editor changed their selection, the dashboard updated a live preview and generated a self-contained script snippet that they could copy to their clipboard in one click and paste straight into the CMS. The prototype was completed within a week and well received by editors and department heads as a blueprint for upgrading audio across the site.

Technical Contributions