If you’ve been tuning in to the PlaceboCast, you might’ve noticed that I like to add a table of contents to podcasts. So, if you’re not interested in listening to me and Joseph rattle on about Mailbox for the zillionth time, you can skip to the topic that interests you more using the timestamp information provided.
I’m still a bit new to the whole podcasting craze but one of my favorite podcast shows I’ve found is The Shoptalk by Chris Coyier and Dave Rubert. The podcast focuses on front-end design and development and I highly recommend it for anyone interested.
The reason why I mention the show is because on the podcast page, they also provide a table of contents for their users. In fact, the timestamps are actually links that, when clicked, allows you to fast forward the player to the specific time without refreshing the page.
When I discovered this, my first reaction was “This is so cool! How do I do this for the PlaceboCast??”
After some Googling, I was able to implement it on LonePlacebo, which I will detail next.
Step 1: Download TimeJump.js
TimeJump works behind-the-scenes to create a standardized API for seeking, based off the YouTube deep-linking syntax.
The plugin works with MediaElement.js, a native HTML5
<video> wrapper. If you’re on WordPress, I recommend using the plugin to embed audio/video players on posts. I use it here on LonePlacebo.