Last week I blogged about adding audio narration to blog posts. For years we’ve also had full podcast hosting, which overlaps with this narration feature but is focused on podcast episodes and feeds. In this post I’ll show how to add narration to an existing blog post, hopefully in the process revealing more about how this works in Micro.blog.
First, record yourself reading the blog post. There are a dozen ways to do this. Make sure to save the file as an MP3.
Upload the MP3 to Micro.blog. You can do this on the web in the Uploads section, or one of the native apps. All the apps also have some form of Copy HTML button to get an HTML audio tag for the upload. It will look something like this:
<audio src="…" controls="controls">
Before we paste this into the edited blog post, we actually want to hide the default audio player that would appear in web browsers. To do this, add a style attribute:
<audio src="…" controls="controls" style="display: none">
If the audio player is hidden, what’s the point? Micro.blog sees the tag anyway. It also knows the duration of the audio, so it can make a guess as to whether this is a narrated version of the blog post. If it is, it skips some features such as adding a link to the transcript of the audio. (Because the blog post text you wrote is already the best transcript.)
Note that to turn a blog post into a podcast episode or narrated post, all that’s needed is the audio tag. This is because Micro.blog natively thinks about posts as HTML. Photo posts have an img tag, audio posts have an audio tag, and so on. When Micro.blog publishes your blog post, it parses the HTML and sets up any metadata that is needed, for example to access from within Hugo.
When you write a new post and include audio at the time of posting, not later, Micro.blog handles managing the audio tag for you, including the CSS to hide posts that are audio narration. Later, we plan to improve the editing interface so this is more seamless too.
