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.
Update May 3 2023 - Yann Dumoulin reached out to me with this message:
Hi Peter, this is a quick follow up about your post about Hugo and audio files.
I wrote about a similar shortcode, enhanced with an optional JS player, see:
Code: https://github.com/RoneoOrg/hugo-shortcode-roneo-collection
Demo & tutorial: https://roneo.org/en/hugo-audio-player-embed-remote-media-files-plyr-shortcode/
I’ve not tried this yet but it looks really nice. With this you’ll have more control over the style of the player and more. Thanks for sharing your work, Yann!