HUGO

Audio player in partial

Hello,

Context :
I want to provide text to speech (audio version of articles). I use google cloud text to speech but don’t have the skills to integrate the API so I decided to display a player.
I want to be able to use this player in content and in template so I have created partial/audio.html and shortcodes/audio.html.

I’m confident with the shortcake and it works as expected but - as I’m a beginner with Hugo and everything development related - to get your validation of the logic I have use.

Goal
Display in my post template the player and get the audio file for each post in front matter.

What I have done

  • Front matter :
---
title: This is a test article
date: 2017-02-07T00:00:00.000+00:00
lastmod: 2021-01-11T00:00:00.000+00:00
audiopost: "/test.mp3"
---
  • layout/audio.html
<div class="audio-player">
            <audio id="audio">
                <source src="{{ .Params.Audiopost }}" type="audio/mpeg">
            </audio>

            <div class="player-controls">

                <button id="playAudio"></button>

                <div id="seekObjContainer">
                    <div id="seekObj">
                        <div id="percentage"></div>
                    </div>
                </div>

                <p><small id="currentTime">00:00</small></p>

            </div>
        </div>
        <div>
            <div>Audio</div>
            <div>Listen to the article</div>
        </div>
  • post.html
<div class="">{{ if (eq .Params.Audiopost "") }}

<p>nothing to display</p>

{{ else }}

{{ partial "audio.html" . }}

{{ end }}</div>

<div class="mt-3 ml-1">

<p class="text-xs">Audio</p>

<p class="font-bold">Listen to the article</p>

</div>

</div>

{{ end }} 

Do you confirm (or not) that the logic is the right one and follow how it has to be done with Hugo. Do you see any improvement?

I also wonder if if was the right choice for {{ if (eq .Params.Audiopost "") }}?

Thanks for your support and as I start this project I’m curious of having your opinion in order to get “good reflex” with Hugo and start on good basis.

Please use proper code blocks when posting code because otherwise part of your post will not be rendered.

Either use the code button </> in the post editor, or use backticks (tilde button in the keyboard).
Inline code blocks are wrapped within 2 backticks blocks are defined by 3 backticks in a row at the beginning and then another 3 at the end.

sorry for that (now I know it) :pray:

with is better for this sort of condition:
with .Params.Audiopost

Also the audio partial should reside under /layouts/partials/audio.html