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!

1 Like
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

2 Likes
4

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

Code is in this template

2 Likes
5

Hi @zachy9 ,

I’ve been searching for the same thing, I finally found a solution, based on Plyr.io.

My requirements were:

  • embed remote audio files
  • support WAV, FLAC, OGG, MP3, M4A
  • provide a download link
  • do not require JS
  • keyboard navigation
  • lightweight

I’m pretty satisfied with the outcome, so I published my notes: Hugo: Include audio files in Markdown pages with a Shortcode | Roneo.org

Note that video support comes with no effort – See this first experiment

Hope that helps someone

6

That one was remarkably simple to install, thanks ! Can’t the say for many css players I tried, which, well, never worked.
I changed the shortcode into a partial to inject in my menu.
But the styling isn’t compatible with a short width, I’ll need something more rectangular and small. Touching the looks of <audio> html elements is so akward, because you don’t come up with your own buttons etc. Even modifying something existing, proves challenging for a newbie (2/3 newbie perhaps).

7

Plyr allows to select which parts of the player are displayed.

This shows a large player:

controls: [‘play’, ‘progress’, ‘current-time’, ‘mute’, ‘volume’, ‘download’, ‘fullscreen’]

I guess this should be smaller:

controls: [‘play’, ‘volume’]

See this page about ‘controls’ to learn more