ℹ️ Audio narration

Documentation
1

About audio narration

You can upload an MP3 audio file when writing a new blog post on the web. If it’s a podcast episode, Micro.blog will include an audio player in the web page and also generate a transcript of the episode (if the global AI setting on your account is enabled).

If the audio file appears to be a narrated version for the blog post, Micro.blog hides the audio player and transcript link. Instead, Micro.blog includes a smaller play button and “Listen” link at the top of the post. In the Alpine theme, it looks like this:

audio-button-screenshot

The following themes currently support this feature:

  • Default
  • Marfa
  • Alpine
  • Primrose
  • Tiny
  • Cards

For more background on why we built this feature, see Manton’s blog post.

Narration.js

The play button is powered by a JavaScript include called Narration.js. You can paste the following JavaScript snippet anywhere in a blog post template to add the play button:

{{ with .Params.audio }}
  <script type="text/javascript" src="https://micro.blog/narration.js?url={{ . }}"></script>
{{ end }}

If you’re already using one of the themes listed above, there’s no need to add this JavaScript to your blog. It’s already baked in.

HTML tag

This feature is based on the standard HTML <audio> tag. When you create a new blog post and attach an MP3 file, Micro.blog creates this tag for you. But what if you want to add the audio tag to an existing post by editing it?

Micro.blog for Mac has special support to copy a version of this tag with inline CSS that hides the audio player by default: “Copy Audio for Narration”. This is ideal when you don’t want the narration to distract from the blog post.

image

If you’re not using the Mac app, you can create a tag like this yourself, following the same style convention. For example:

<audio src="https://cdn.uploads.micro.blog/example.mp3" 
preload="metadata" style="display: none"></audio>

Podcast feed

For Micro.blog subscribers, Micro.blog generates a podcast RSS feed /podcast.xml for any post that includes audio. The podcast feed includes both podcast episodes and audio narration posts.

2 Likes