2 minutes
Hugo Audio Shortcode
A shortcode for audio files based on the internal figure shortcode.
I am using the static site generator hugo to build my website. There is no built in shortcode for audio files, so I created one which fits my needs. It works with page resorces and absolute urls.
audio.html
Put this file with the following code in your projects layouts/shortcodes folder.
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
{{- $u := urls.Parse (.Get "src") -}}
{{- $src := $u.String -}}
{{- if not $u.IsAbs -}}
{{- with or (.Page.Resources.Get $u.Path) (resources.Get $u.Path) -}}
{{- $src = .RelPermalink -}}
{{- end -}}
{{- end -}}
<audio controls
{{- with .Get "preload" }} preload="{{ . }}"{{ end -}}
>
<source src="{{ $src }}"
{{- with .Get "type" }} type="{{ . }}"{{ end -}}
>
Your browser does not support the audio tag.
</audio>
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
<figcaption>
{{ with (.Get "title") -}}
<h4>{{ . }}</h4>
{{- end -}}
{{- if or (.Get "caption") (.Get "attr") -}}<p>
{{- .Get "caption" | markdownify -}}
{{- with .Get "attrlink" }}
<a href="{{ . }}">
{{- end -}}
{{- .Get "attr" | markdownify -}}
{{- if .Get "attrlink" }}</a>{{ end }}</p>
{{- end }}
</figcaption>
{{- end }}
</figure>
Using the shortcode
{{< audio src="example.mp3" type="audio/mpeg" title="Example" caption="Example Audio" >}}