Audio and how to play it

I’m new to Hugo. I have a lot of mp3 and other audio files. I am not sure where I would put them nor am I sure how to render them with a audio field tag of some type. The use case is the audio is of meetings so they wil not change. I just dont think they belong in the static file. I suppose option B is to put them on a static location and just link to them? sugestions please.

Have a look at Page Bundles and Page Resources:

You can place the non-content files like audio, images, etc. in the same folder as the content files. Then using the resources front-matter, you can assign meta-data to those audio files.

You have some reading to do with those 2 doc pages. Feel free to ask more questions if you have difficulty linking the Page Resources concept with your application.

2 Likes

Re @kaushalmodi’s point about using page bundles / resources, having the ability to do metadata is a nice benefit if you want to spend the time on it.

Regarding playing the files back, you can either just link directly to them whether you put them in /static/path/to/audio or with the content in the content folder, or, use a js library like howler. Direct linking leaves playback up to the visitor’s system or browser settings.

In both cases, you have to pay for the bandwidth used. Depending on those fees or bandwidth limits, you might decide to host them on some service like soundcloud for a fee or, with your site’s files. Amazon S3 is a good option for low bandwidth costs as far as I see from researching it.

I might have misunderstood what @vincent_youmans meant by:

I thought he wanted to add some parameters to each audio resource…

1 Like

@kaushalmodi, @vincent_youmans mentioned about audio field tags so I thought metadata too. I just didn’t connect it to the concept of using resource metadata in frontmatter. It’s a good point.

so, let me ask the question again…
1… Where can I put the actual Audio files in the HUGO project? After reading your responces, it looks like in the actual Content section. That was my original thought. Any oppinion on putting the audio in Git… as static linked files… https://help.github.com/articles/getting-permanent-links-to-files/

2… I wanted to get feed back on ways that other HUGO people handle audio players. I had theory there was some bult in tags for it. Or perhaps templatize it. Thanks for the Howler.js idea. In HUGO, would I use a partial that displays the URL from front matter? is there a way to create a custom Tag that renders a template of the player? like
this is the audio .
Then I would have a template that renders playAudio.
I appologize but I am new to HUGO…

Can someone post actual code from a working Hugo page that we can cut and paste into own projects.?

There is another thread with code but it does not work for ananke theme. It must be a shortcodes that came with another theme.

“Failed to extract audio short code”

Take the shortcode and add it to you site, then the error will disappear.

How to add audio MP3 to Hugo

Make a file with the path as below:
layouts/shortcodes/audio.html

Put the following code inside audio.html

<figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
    <audio controls preload="{{ .Get "preload" | default "metadata" }}">
      {{ with .Get "src" }}<source src="{{ . | relURL }}" type="audio/mpeg">{{ end }}
    </audio>
    {{ with .Get "caption" }}<figcaption>{{ . }}</figcaption>{{ end }}
  </figure>

Congratulations: Now you have created a short code called audio.

Now add a short code entry into your post/page where you want the audio player to be.

{{<audio src="path/to/your.mp3" caption="your caption">}}

Save the changes to the post file which will restart the server, or restart fresh.

This works… confirmed.

This link below helped me. I typed and condensed the instructions in this post so you don’t have to (hu)go elsewhere.

1 Like