Principal Web
Developer &


Listen along to this post as you read, or subscribe to the blog

If You Blog, Consider Blogcasting

I had the not-so-new idea of attaching an audio companion to my blog. As someone who sort of wants to dip into podcasting (beyond the one I already tried), but doesn’t quite have the time or drive to get something going right now, it seemed like a cool compromise.

I’m calling it blogcasting, because it seems right, and certainly it’s not a term I invented, but as long as I don’t google it, I can claim to have.

How to get started Blogcasting

I went down a few avenues to get the blogcast up and running. First I thought I would use a podcasting platform to host it, and then, bonus, it would be a podcast too. Ultimately though, most podcast hosts are not free and it’s a bigger process to add in all the metadata for a podcast episode just to get something published.

Thanks to friends in the ShopTalk Show d-d-d-discord though, I was able to figure out a simpler implementation.

Step 1: Record the episode

First, I settled on a very quick recording process using audio hijack to capture the audio, and Adobe Audition to do a very quick listen-through and editing of pace and mistakes. So far each episode takes about 1.5x its length to edit, and that seems pretty good.

Step 2: Host the episode

You need a place to host your .mp3 files. In some cases your blog might have a server that can do this. In my case, a static blog hosted on Cloudflare, I chose to create a Cloudflare R2 storage bucket to host my files.

Step 3: Implement the blogcast into your blog posts

Since I’m now using Astro, I was able to very quickly create a BlogcastPlayer.astro component that uses muxinc/media-chrome under the hood. It’s a really fantastic web component library for doing quick custom video and audio players.

The BlogcastPlayer.astro component looks something like this:

const {url} = Astro.props;

<div class="blogcast-player" >
  <media-controller audio>
      <media-time-display show-duration></media-time-display>
  <p>Listen along to this post as you read, or <a href="">subscribe to the blog</a></p>

  import 'media-chrome';

Given a url prop, the player renders itself. Not shown are some of the extra styles I applied to fix it to the bottom of the page, but hopefully you get the gist of it.

Step 4: Add the media to your RSS feed

This is honestly the most surprising and cool part about this. I had no clue that all you need to do to add media to accompany a blog post feed is to add an <enclosure /> tag pointing to the file for each <item>.

It might look something like this:

<enclosure url="" type="audio/mp3"/>

Most RSS readers are happy to pick this up and display a playable interface.

Will you give it a shot?

What do you think? Is this an appealing idea? Have you tried it out on this post? I’d love to hear your feedback, whether it’s just dropping a like in the lower right (sorry RSS folks), or replying to my tweet or toot sharing this post. I myself am looking forward to Blogcasts sweeping the nation!