⏯️ AudioCard — The React audio player designed for podcasts and Twitter cards

I recently launched two podcasts, neither of which are technical. The first is Seek Justice, in which I engage my friend who is an expert in the criminal justice system — a thing I know almost nothing about — in thoughtful discussion about justice reform. The second is Happy Hour with Dennis and Erik, in which my same friend and I have an evening beverage, tell stories, and make each other laugh.

I’ve learned a lot about podcasting so far. One thing I already knew was that both podcasts needed to have decent websites that could quickly get someone listening, and make it as frictionless as possible to subscribe. I really liked the design of The Undefined Podcast, by fellow React nerds Jared Palmer and Ken Wheeler, so I more or less plagiarized their design layout entirely.

I knew I wanted the website to be static html with React rehydration, which currently very fashionable in 2019, and I went back and forth looking at blogging boilerplates from Gatsby and React Static, but what really sealed the deal was learning of Shawn Wang’s very recent work on a React Static Podcast hosting framework, which does things like generating an RSS feed with show notes directly from the same markdown files that make up your episode post, using his hilariously named Podcats library. Awesome!

But there was one final piece of the puzzle that I needed: an in-page audio player.

Surveying the React audio player landscape, I found that the two leading contenders are Cassette and React Audio Player. Cassette is quite sophisticated, and does video as well, but it was playing my MP3 files using the <video> tag, and required a stylesheet import. And React Audio Player is just a simple wrapper around the HTML5 <audio> tag. I wanted to replicate the embeddable players of some of the nice podcast hosting services, like Simplecast or Anchor, with “album” art.

And for bonus points, I’d love it if I could use the twitter:player meta tag to get my podcast episodes to play directly in Twitter. My favorite podcast consumption app, Overcast, has this functionality on its website.

I also knew, since it’s 2019, I wanted to use Typescript and React Hooks. I wasn’t really sure how to create a library with Typescript, but I do know of a well maintained React Typescript library! So I more or less cloned the repo for Formik and removed all the code, but kept the scaffolding. One side-effect of this was that I ended up learning Storybook for testing my component.

Without further ado… Introducing…

⏯️ AudioCard

AudioCard is a responsive audio player for React designed to be compatible with Twitter Player Cards.

<AudioCard
  title="Ep 1. – What is Criminal Justice?"
  art="https://seekjustice.fm/art300.jpg"
  source="https://seekjustice.fm/media/001.mp3"
  skipBackSeconds={10}
  skipForwardSeconds={30}
/>
 CopyCopy

Example usage

This renders something that looks like:

It’s just a screenshot. Don’t click it! 😄

If you have a podcasting website that you build with React, and you either don’t have an in-page player, or are dissatisfied with the one your podcast host has given you to embed, or would like to add Twitter player card functionality, then check it out.

Github Repo

Storybook Playground

---

Here you can see it working with embedded tweets:

11164413206362603521112983811401318401

Thanks for reading. I hope this project can be of use to some people. ❤️

---

...and if you find either of my podcasts interesting, susbcribing, sharing and ⭐⭐⭐⭐⭐ iTunes ratings are the nicest gifts you can give a podcaster.