How I built the Podnews podcast pages

James Cridland
May 25, 2018 · 4 min read

I was asked on Twitter to document how I built the Podnews podcast pages. So, here we are, then.

What are they?

So, I produced a look-up page, which queries the Apple Podcast data, and then one piece of code that produces this podcast page (or hundreds like them): https://podnews.net/podcast/1176327926

The Apple Podcast ID

Apple has an API to look up more details about that ID, so the first thing I do is go and grab that data from https://itunes.apple.com/lookup?id=1176327926; it looks like this:

It won’t escape you that this API was really developed for music tracks, hence some of the words used within this result. Anyway, it contains a bunch of useful information like the name of the podcast and graphics. And it’s JSON, so PHP’s helpful json_decode function comes in here.

Apple iTunes helpfully also gives us the “feedUrl”, which is the RSS feed of the podcast. I then go and grab that for some additional information (primarily the link to the podcast’s website, and the audio). I use simplexml_load_file to load this in.

Armed with all that data, I can then build the page.

The page is built from…

The image at the top of the page is produced by grabbing the podcast artwork, rotating and resizing it, placing it on a pre-built background, and then serving that as one cached file. I use a PHP image library to achieve this. It’s then cached by Amazon Cloudfront for a very long time, so hopefully my server rarely needs to do this work: it’s very processor intensive. (I could probably achieve similar with two images and CSS).

Here’s the Chrome mediaSession in action — podcast artwork, title and artist; the skip buttons jump forward 60 seconds and back 15, though I can’t change their appearance.

The audio player is standard HTML5 audio code, with preload switched-off so that it doesn’t interfere with podcast stats. It’s an amp-iframe: that enables me to run bespoke JavaScript for the player (which is forbidden by AMP), and secondly allows me to cache the main podcast page quite heavily while only caching the player component for just one hour so new episodes should display quickly. It also means I can use non-https audio files, since I use the audio file referenced in the RSS; https is a requirement of AMP. This page component reads the RSS feed as well. The bespoke JavaScript sets a Chrome mediaSession, so Android devices will see a nice notification with an image, play data and even skip forward/back controls.

There’s a list of apps and icons below that. I wanted to produce a list that was device-aware, so I don’t list Apple Podcasts for an Android user, for example; but you can’t do that kind of dynamic content in AMP. After a little thinking, I hit upon the idea of using an amp-list component which reads a JSON file; that JSON file is dynamically generated using the user-agent (so I know if you’re using an Android, iOS or desktop device). This meant a bespoke ‘behaviour’ in Amazon Cloudfront, to allow that one component to get the user-agent header.

The results

The UX needs work: it’s still not as friendly as I’d like; and I’d like the ability to play the podcast to be more visible upon pageload (it’s frequently below the fold). But it’s a good start, and enables a consistent way to list and link-to podcasts, so that’s nice.

  • You can subscribe to podnews.net’s daily email — and use a smart AMP form while doing so — at https://podnews.net

James Cridland

Written by

I am Editor of https://podnews.net, the daily podcast newsletter. I am also a radio futurologist: a writer, speaker and consultant. https://james.cridland.net