Audio player in partial

support
1

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.

2

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.

3

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

4

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

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