Examples of hugo sites with audio players in blog posts?

support
#1

I’m just starting to learn Hugo — I wonder if anyone could point me toward a theme or site that makes good use of a styled javascript audio player that is embedded in blog posts? something I can study to learn how this is done and what the best practices are.

I’m not looking for a specific JS script or player (I have one already I’m hoping to use). I just want to see how one goes about integrating a generic player script into Hugo and then using it in their posts. So ideally I’m trying to find a site where I can download the the source material as opposed to just look at a generated version of the site.

Thanks so much!

#2

I have integrated such a thing in my website(s).

The page is here: Dropbox | Hrishikesh Kokate (scroll to around 60% of the total space). That one is made possible using Plyr. The source is here: GitHub - Hrishikesh-K/Portfolio: Repository of my personal portfolio website made in Hugo, hosted on Netlify.

The other one (same website, just different version in development): Dropbox | Hrishikesh Kokate. This one is made possible using Wavesurfer.js. Source is here: GitHub - Hrishikesh-K/Portfolio at v2

Basically, I think you need to create a shortcode to use according to the library you are planning to use. For example, the Plyr one simply needed a <source> tag and it worked. However, as the Wavesurfer library is not an audio player per se, it needed some extra markup and I specified the source as an attribute which I later passed on to the library using JavaScript.

1 Like
#3

I use page bundles and a little shortcode (HTML5)

{{ $audio := printf "**/%s.*" (.Get 0) }}{{ $sound := .Page.Resources.GetMatch $audio }}
{{ $type := (.Get "type") | default "audio/mpeg" }}
{{with $sound }}<audio autoplay src={{.Permalink}} type={{$type}} />{{end}}

in markdown {{< audio "booting" >}} searches for booting.* - no java script needed

1 Like
#4

This theme has a podcast page type which has an audio player.

Code is in this template

1 Like