Today I wanted to figure out how to include an audio file inside my blog pages (which run through the wonderful Hugo static site generator). It turned out to be pretty easy, but I didn’t find a single help page or blog post describing how, so here you go.
Create a new file named something like audio.html in your Hugo site’s /layouts/shortcodes folder.
Enter these lines as the content there (you can edit the HTML any way you like):
<p>
<audio class="player" controls preload="none">
<source src="/mp3/{{ index .Params 0 }}" type="audio/mp3">
</audio>
</p>
Save that file.
When creating a post then, include the shortcode wherever you like in the page, like this (without the space bewtween the curly braces)
{ {< audio "The Breeders - Joanne.mp3" >} }
And that’s it - a player should appear in that spot in the page whenever you view the working site.
Here’s what that looks and sounds like (featuring Kim Deal!):
I hope that helps someone else out there get this going.