The hotlinking of images also presented a second problem — mixed content security warnings for images hosted on a HTTP URL. As a result, I decided it would make more sense for me to download the images for each podcast and episode, resize them (I settled on 500x500) and if they were JPEGs compressed them to 60% quality. I then uploaded the modified image to Amazon S3, and put Amazon CloudFront CDN in front of this bucket to optimize the delivery of the assets to visitors around the world.

Hotlinking mixed content warnings — yikes!

As the site contained over 15,000 episodes — the first run of this task took a while, but it drastically reduced the load time of the page and solved the mixed-content warning issue, so it was worth the effort.

A better audio listening experience

One of the aspects of the site that bothered me at launch was the fact that if you used the simple HTML5 audio player to listen to an episode, it would stop playing if you navigated away from the page, and would not remember where you left off if you went to play it again. So I decided early on that I would fix this post-launch with an audio player that remained static across the site and would not be interrupted as you browse.

I had actually previously solved this issue for music artist websites for my startup, Subwoofr. At the time, I used the PJAX library to load internal links over XMLHttpRequest and just replace the section of the document that needed to be replaced with new content. This basically removed the need for page loads when navigating between pages, and allowed audio to continue playing as you browse. A nice bonus was that the site feels much faster as links appear to load instantly without the page flash that normally occurs.

The PJAX library is dependent on jQuery, and it hasn’t been updated in some time. It also requires you to do some hackery to get things like page titles to update as you navigate from page to page. At some point in the past when working on a Ruby on Rails project, I had used Turbolinks for a similar purpose. I checked out Turbolinks again and found it was perfect for what I wanted to achieve and didn’t require me to load in jQuery or third-party libraries.

I then built a custom audio player using the native HTMLAudioElement API. I did so for a couple of reasons. First, when using the browser’s native controls, Turbolinks will pause the audio between page loads. Second, the styling of the player is quite different on various browsers. Finally, I wanted to allow users the option of changing the playback speed, as I know many people like to listen to podcasts at 1.5x playback rate.

This worked great, but there was an edge cases where the audio would get cut off between page loads — if Turbolinks times out and does a hard page load. Also, I thought it would be nice if a user navigated away to another site and came back later, that the last episode they were listening to would resume where they left off, with their playback rate and muting preferences intact. To achieve this, I used HTML5 localStorage. I listen to several audio events, and update localStorage to reflect the current playtime, playback rate and whether or not the volume is muted. When the page loads, I check if there is data in localStorage, and if so I restore it into the player and the user can jump right back in to the episode.

Launch

I launched the website on Wednesday, 22nd March 2017 at 4pm. I posted a Show HN to Hacker News, tweeted about it, posted on a couple of Subreddits and added it to BetaPage. I’ve never had a post do well on Hacker News, but this post performed even worse than anything I’ve put up in the past. This was very disappointing, as I thought the HN audience would really find it useful. A week later, someone posted an Ask HN seeking everyone’s favorite podcasts, and this made the front page. Perhaps my timing was bad — I posted at a very busy time for HN submissions — I knew this was a risk, but felt that if it got traction, the heavy volume of traffic would be worth it. Perhaps nobody gave a shit. I guess I’ll never know!

On the Sunday after launch, I dropped an email to Adam Wathan, asking him to be one of the first guests on my soon-to-be-launched podcast (this is something I’m planning in the coming weeks). I told him about the new site and asked for his feedback. He loved it, retweeted one of my tweets and this drove a nice stream of traffic to the site, especially for a Sunday! Someone posted the site on Product Hunt the next Tuesday, but I didn’t know this had happened until the next day, and it had barely even registered. I ran into problems trying to add images to the Product Hunt listing, presumably they were victims of the chronic S3 outage that affected much of the Internet that day.

First Week Traffic Stats

Overall, I was pretty pleased with the first week’s traffic. 786 unique users generated a little over 3,000 page views. Users spent an average of 2 and a half minutes on the site which was decent, but I’m hopeful that the fixed audio player (deployed today, a week after the initial launch) will lead to an uptick in this particular statistic. As you can see, most of the traffic stemmed following Adam’s post on Sunday, and despite it dropping significantly the following day, it was good to see traffic rise again the next day.

What’s next?

I’m hopeful that over time the site will start to rank well in Google’s results for related keywords, and that this will drive decent organic traffic to the site. I also have some other ideas about how to take the project further:

A new blog on the site that showcases podcasts and offers tips on hosting podcasts

A podcast of my own, interviewing the hosts of podcasts featured on the site

User sign up — logged in users will be able to set their preferred categories and topics to tailor the site to their interests, upvote and comment on podcasts and episodes, add podcasts and episodes to their collection, get custom RSS feeds for their collection, queue up multiple episodes for playback and subscribe for email updates whenever new episodes are published in their favorite podcasts

Automatically download and process audio files to generate transcripts and waveform data and perform further analysis, extend searchability and more

Native mobile app on iOS/Android, native desktop app on Mac/Linux/Windows

Add sister sites for other verticals (design, startups, business, others)

I’d love to hear your thoughts on the above ideas, and if you have any features you’d like to see on the site I’d greatly appreciate any suggestions.

Whether or not I’ll do all of this will depend on the success of the project. I haven’t given too much thought to monetisation yet, obviously there is the potential to run ads or sponsorship slots on the site, mailing list and podcast, but I’m going to hold off on pursuing this until the site has a much larger audience. I have some rough ideas about related products that could provide a revenue stream, but I’ll keep those close to my chest for now.

In conclusion

Overall this has been a great project to work on, and I’m glad I did it. The reaction from those that I have reached so far has been almost exclusively positive. Not to mention that I now have an endless supply of podcasts to listen to every morning and evening!

I’ll post a follow up to this after the site’s been live for one month — it will be interesting to see the difference between the progress in the first week and the first month, here’s hoping it’ll be a positive one!