Adding Audio

I’ve been playing with AI generated narration of posts. I wanted to embed these into pages with an HTML5 Audio tag. This doesn’t appear to be a feature of the Markdown engine that Hugo supports, so I decided to work out how to do it.

It seems the best way of extending Markdown capabilities with Hugo is to add Shortcodes. Shortcodes are basically content templates that can generate a wider array of markup in a standard way from your entry.

I decided to add it to my site level rather than my theme level as I want them to work basically even if I switch theme. This is as simple as adding a file to the layouts\shortcodes folder of my Hugo install with the name of the shortcode and the extension HTML. So I’ve now got layouts\shortcodes\audio.html.

This is then a really simple bit of markup using the Hugo template syntax to extract attributes from the shortcode that will be added to pages:

<figure class="figure">
    <audio controls preload="{{ .Get "preload" | default "metadata" }}">
    {{ with .Get "src" }}<source src="{{ .  | relURL }}" type="audio/mpeg">{{ end }}
    
    </audio>
    {{ with .Get "caption" }}<figcaption class="figure-caption">{{ . }}</figcaption>{{ end }}
</figure>

This then is inserted into pages just like the HTML tag, but, with template braces around it:

{{<audio src="audio/sample.mp3" caption="audio sample">}}

Mostly taken from this forum article: Playing audio files