Pretty specific, huh? While we’re going to do exactly what the title says, this post is more about a learning exercise and an example of getting help on the internet.
My podcast editor, Chris Enns, is always looking for ways to improve his work and make podcasting better. One kinda cool way to do that is to offer “chapters” so that people can jump around in a podcast to specific points.
Through TimeJump, we already offer that on the website itself. Those happen in the format of hash links like this: #t=12:18. Believe it or not, relative links like that, in the show notes, actually work in some podcatchers (podcast listening apps).
data-recalc-dims=1Jumping around an audio element with the TimeJump JavaScript library.
But using “chapters” is, I suppose, the more correct way of handling this. With chapters, a podcatcher can offer its own native UI for displaying and allowing the user to jump between chapters.
Even iOS 11 is now supporting them in the podcast app:
data-recalc-dims=1This is the Podcast app built into iOS, but all sorts of different podcatchers display chapters in their own way.
How do you add them to a podcast? I’m no expert here, but there is an native Mac app called Podcast Chapters that does this:
This is exactly what Chris Enns uses to add the chapters, which leads us to Chris’ workflow. Chris writes show notes for podcasts, and does that in Markdown format. The shows he edits for (at least some of them) post the show notes on the web and the CMS’s that power that use Markdown.
He’ll create a Markdown list (TimeJump compatible) of what is happening in the podcast, like this:
* **[1:49](#t=1:49)** Toys from the future.
* **[8:40](#t=8:40)** Talking about flip.
Another piece of the puzzle here is that the Podcast Chapters app does its thing by giving it a `.cue` file. Cue files look like this:
TITLE Episode 273
FILE shoptalk-273.mp3 MP3
TITLE Toys from the future.
INDEX 01 01:49:00
TITLE Talking about flip.
INDEX 01 08:40:00
That’s a very specific format. It’s hand-writable, sure, but it essentially has all the same data as that Markdown list, just in a different format.
There is even an online generator to help make them:
All that stuff I just explained I only understand because Chris himself explained it. This is my favorite part. He explained it by asking for help through a YouTube video that make the problem clear as day.
Chris knew exactly what he needed to make this workflow work, he just couldn’t figure out one little part of it, so he asked.
To be honest, I didn’t really know how to solve it either. But, maybe just maybe, I knew just a little bit more, enough to get the process started.
I know how to make an interface that would do the job here: side-by-side