Website for a podcast
I built this for some friends, and really it’s a proof-of-concept that jamstack sites can be put together extremely quickly and cheaply.
How’s it built?
- Gatsby is the frontend framwork (Gatsby/Image is a dream)
- Netlify CMS makes editing wonderfully straightforward
- Bulma CSS, while not cutting edge, saved a lot of time (and it doesn’t ship that much CSS with PurgeCSS)
Why I used Spotify player embeds
A podcast site needs a podcast player.
All the big embeddable
<iframe> players are bad for performance.
The obvious choice for performance was to pull episodes from the podcast feed and roll our own HTML5 audio player using hosted MP3 files.
On closer inspection, this has minor shortcomings.
- podcast feeds are bad at series/episode data (those
S03E12 Interview with Will Part 2title strings)
- while it’s cool to be all indie and decentralised, the point here is to get people to subscribe in podcast apps
- in fact, it’s a pretty whacky use case to expect users to wander about listening to a podcast in a web browser
So maybe a player embed is the way to go? Why Spotify?
- it’s the most platform-agnostic option
- for Spotify users, the audio plays in app, not from the web page
- for everyone else, it still works
- there’s a subscribe button
And what about performance? On page load, the browser loads a static mock-up of the player using the
srcdoc attribute. When the user presses play, the real embed is loaded and starts to run.