Embedding audio with Hugo shortcodes

Hugo provides the ability to easily create custom shortcodes to meet your website’s needs. All you need to do is add an html file in the shortcodes folder with the html you want to render.

To make a custom audio shortcode create an html file in the following location: layouts/shortcodes/audio.html

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

And shortcode:

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

Originally published at https://ronaldsvilcins.com on April 20, 2022.